---
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>{{ EmbedLiveSample('Live_Sample', 'Live Sample Link', 300) }}</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>

{{Compat("css.properties.padding")}}

<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>