initial commit

1 files changed, 178 insertions, 0 deletions

diff --git a/files/es/web/css/padding/index.html b/files/es/web/css/padding/index.html
new file mode 100644
index 0000000000..fdff58428a
--- /dev/null
+++ b/files/es/web/css/padding/index.html
@@ -0,0 +1,178 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - Propiedades CSS
+translation_of: Web/CSS/padding
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad CSS <strong><code>padding</code></strong> establece el espacio de relleno requerido por todos los lados de un elemento. El <a href="/en/CSS/box_model#padding" title="http://developer.mozilla.org/en/CSS/Box_model#padding">área de padding</a> es el espacio entre el contenido del elemento y su borde (<code>border</code>). No se permiten valores negativos.</p>
+
+<p>La propiedad padding es un atajo para evitar la asignación de cada lado por separado (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p>
+
+<p>{{EmbedInteractiveExample("pages/css/padding.html")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Padding crea espacio extra dentro de un elemento. En contraste, <code>margin</code> crea espacio extra <em>alrededor </em>de un elemento.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox notranslate"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("padding")}}</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Especifica un ancho fijo no negativo. Ver más detalles {{ cssxref("&lt;length&gt;") }} .</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Con respecto a la anchura("width") del bloque que lo contiene.</dd>
+</dl>
+
+<ul>
+ <li><strong>Uno:</strong> un valor unico se aplica a los 4 lados.</li>
+ <li><strong>Dos:</strong> el primer valor se aplica a <strong>arriba y abajo</strong>, el segundo valor se aplica a <strong>derecha e izquierda</strong>.</li>
+ <li><strong>Tres:</strong> el primer valor se aplica a <strong>arriba</strong>, el segundo valor a <strong>derecha e izquierda</strong> y el tercer valor se aplica a <strong>abajo </strong>del elemento.</li>
+ <li><strong>Cuatro:</strong> el primer valor se aplica a <strong>arriba</strong>, el segundo valor se aplica a la <strong>derecha</strong>, el tercer valor se aplica a <strong>abajo </strong>y el cuarto valor se aplica a la <strong>izquierda</strong>. </li>
+</ul>
+
+<h3 id="Ejemplos">Ejemplos</h3>
+
+<pre class="brush: css notranslate"> padding: 5%;               /* aplica 5% de padding en todos los lados*/
+</pre>
+
+<pre class="brush: css notranslate"> padding: 10px;              /* aplica 10px de padding en todos los lados */
+</pre>
+
+<pre class="brush: css notranslate"> padding: 10px 20px;         /*  arriba y abajo, 10px de padding */
+                             /* izquierda y derecha, 20px de padding */
+</pre>
+
+<pre class="brush: css notranslate"> padding: 10px 3% 20px;      /*  arriba, 10px de padding          */
+                             /*  izquierda y derecha, 3% de padding */
+                             /*  bottom, 20px padding       */
+</pre>
+
+<pre class="brush: css notranslate"> padding: 1em 3px 30px 5px;  /*  arriba    1em  padding  */
+                             /*  derecha  3px  padding  */
+                             /*  abajo 30px padding  */
+                             /*  izquierda   5px  padding
+                 /* en dirección de las agujas del reloj */
+</pre>
+
+<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p>
+
+<h2 id="Live_Sample" name="Live_Sample">Ver ejemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;h4&gt;¡Hola Mundo!&lt;/h4&gt;
+&lt;h3&gt;El padding es diferente en esta linea.&lt;/h3&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+</pre>
+
+<p>{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS3 Box') }}</td>
+   <td>Sin cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Sin cambio.</td>
+  </tr>
+  <tr>
+   <td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Soporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
+</ul>