padding

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La propiedad abreviada de CSS padding establece el área de relleno en los cuatro lados de un elemento a la vez.

Pruébalo

padding: 1em;

padding: 10% 0;

padding: 10px 50px 20px;

padding: 10px 50px 30px 0;

padding: 0;

<section id="default-example">
  <div class="transition-all" id="example-element">
    <div class="box">
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
    </div>
  </div>
</section>

#example-element {
  border: 10px solid #ffc129;
  overflow: hidden;
  text-align: left;
}

.box {
  border: dashed 1px;
}

El área de relleno de un elemento es el espacio entre su contenido y su borde.

Nota: El relleno crea espacio adicional dentro de un elemento. Por el contrario, margin crea espacio extra alrededor de un elemento.

Propiedades constituyentes

Esta propiedad es una abreviatura de las siguientes propiedades CSS:

Sintaxis

css
/* Aplica a los cuatro lados */
padding: 1em;

/* arriba y abajo | izquierda y derecha */
padding: 5% 10%;

/* arriba | izquierda y derecha | abajo */
padding: 1em 2em 2em;

/* arriba | derecha | abajo | izquierda */
padding: 5px 1em 0 2em;

/* Valores globales */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

La propiedad padding se puede especificar utilizando uno, dos, tres o cuatro valores. Cada valor es una <longitud> o un <porcentaje>. Los valores negativos no son válidos.

  • Cuando se especifica un valor, se aplica el mismo relleno a los cuatro lados.
  • Cuando se especifican dos valores, el primer relleno se aplica a la parte de arriba y abajo, el segundo a la izquierda y la derecha.
  • Cuando se especifican tres valores, el primer relleno se aplica a la parte de arriba, el segundo a la derecha e izquierda, el tercero a la parte de abajo.
  • Cuando se especifican cuatro valores, los rellenos se aplican a la parte de arriba, derecha, abajo e izquierda en ese orden (en el sentido de las agujas del reloj).

Valores

<longitud>

El tamaño del relleno como un valor fijo.

<porcentaje>

El tamaño del relleno como porcentaje, en relación con el tamaño en línea (ancho en un idioma de escritura horizontal, definido por writing-mode) del bloque contenedor.

Definicion formal

Valor inicialas each of the properties of the shorthand:
Applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line.
Heredableno
Percentagesrefer to the width of the containing block
Valor calculadoas each of the properties of the shorthand:
  • padding-bottom: the percentage as specified or the absolute length
  • padding-left: the percentage as specified or the absolute length
  • padding-right: the percentage as specified or the absolute length
  • padding-top: the percentage as specified or the absolute length
Animation typea length

Sintaxis formal

padding = 
  <'padding-top'>{1,4}  

<padding-top> = 
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

Ejemplos

Estableciendo relleno con píxeles

HTML

html
<h4>Este elemento tiene un relleno moderado.</h4>
<h3>¡El relleno es enorme en este elemento!</h3>

CSS

css
h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

Resultado

Estableciendo relleno con píxeles y porcentajes

css
padding: 5%; /* Todos los lados: 5% de relleno */

padding: 10px; /* Todos los lados: 10px de relleno */

padding: 10px 20px; /* arriba y abajo:      10px  de relleno */
/* izquierda y derecha: 20px  de relleno */

padding: 10px 3% 20px; /* arriba:              10px  de relleno */
/* izquierda y derecha: 3%  de relleno   */
/* abajo:               20px  de relleno */

padding: 1em 3px 30px 5px; /* arriba:      1em  de relleno  */
/* derecha:     3px  de relleno  */
/* abajo:       30px  de relleno */
/* izquierda:   5px  de relleno  */

Especificaciones

Specification
CSS Box Model Module Level 3
# padding-shorthand

Compatibilidad con navegadores

Véase también