Propiedad CSS Padding

La propiedad CSS padding crea espacio dentro de un elemento, entre su contenido y su borde. A diferencia de margin — que empuja espacio fuera del borde, entre elementos vecinos — el padding forma parte del propio elemento: comparte el fondo del elemento y está incluido en el área de clic/hover.

Esta página cubre las cuatro propiedades de padding individuales, la propiedad abreviada padding con todas sus formas de valor (de uno a cuatro valores), las unidades y porcentajes que puedes usar, y los casos especiales a tener en cuenta (porcentajes, box-sizing, y por qué el padding nunca se colapsa como lo hacen los márgenes).

Los lados individuales

Con la ayuda de las siguientes propiedades puedes establecer el padding para cada lado de un elemento:

Como puedes imaginar, para la parte superior usamos padding-top, para la inferior padding-bottom, para el lado izquierdo padding-left y para el derecho padding-right.

Todas las propiedades de padding aceptan los siguientes valores:

length — un tamaño fijo en px, em, rem, pt, cm, etc. (por ejemplo padding-top: 16px).
porcentaje (%) — un padding relativo al ancho del bloque contenedor. Importante: un padding porcentual vertical (top/bottom) también se calcula a partir del ancho del contenedor, no de su altura. Esto es lo que hace funcionar el clásico truco de "padding-bottom en porcentaje" para cajas con relación de aspecto.
inherit — toma el padding calculado del elemento padre.

Algunas reglas que vale la pena recordar:

El padding no puede ser negativo. Si necesitas desplazar el contenido en la otra dirección, eso corresponde a margin o transform.
El valor predeterminado de cada propiedad de padding es 0.
El padding no se colapsa. Los márgenes verticales adyacentes pueden fusionarse en uno (colapso de márgenes), pero dos paddings siempre se suman — así que los elementos apilados conservan ambos paddings.
Por defecto, el padding se suma al width/height declarado. Una caja de 200px de ancho con padding: 20px se renderiza con 240px de ancho. Establece box-sizing: border-box para que el padding quede dentro del ancho declarado.

Ejemplo de las propiedades de padding individuales:

Ejemplo de uso de propiedades de padding individuales:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: yellow;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-left: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Individual padding properties</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
    </div>
  </body>
</html>

Pruébalo tú mismo »

Padding como propiedad abreviada

La propiedad CSS padding es una forma abreviada de las cuatro propiedades individuales:

La cantidad de valores que pases determina cómo se asignan a los cuatro lados:

Valores	`padding: …`	Top	Right	Bottom	Left
1	`35px`	35px	35px	35px	35px
2	`20px 40px`	20px	40px	20px	40px
3	`20px 15px 35px`	20px	15px	35px	15px
4	`25px 50px 75px 100px`	25px	50px	75px	100px

El orden de cuatro valores es en el sentido de las agujas del reloj desde arriba: top, right, bottom, left. Con dos o tres valores, los lados faltantes replican el lado opuesto.

Cuando la propiedad padding tiene solo 1 valor, por ejemplo padding: 35px, los cuatro paddings son 35px.

Ejemplo de la propiedad abreviada padding con un valor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: green;
        padding: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Padding shorthand with one value</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Pruébalo tú mismo »

La propiedad padding puede tener 2 valores, por ejemplo padding: 20px 40px, donde los paddings superior e inferior son 20px, y los paddings derecho e izquierdo son 40px.

Ejemplo de CSS padding con 2 valores

p {
  padding: 20px 40px;
}

Esto es equivalente al código anterior.

Ejemplo de CSS padding con 2 valores, forma extendida

p {
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
}

Ejemplo de la propiedad abreviada padding con dos valores:

Ejemplo de código CSS padding

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

La propiedad padding puede tener 3 valores, por ejemplo, padding: 20px 15px 35px;, donde el padding superior es 20px, los paddings derecho e izquierdo son 15px y el padding inferior es 35px.

Ejemplo de CSS padding con 3 valores

p {
  padding: 20px 15px 35px;
}

Esto es equivalente al código anterior.

Ejemplo de CSS padding con 3 valores, forma extendida

p {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 35px;
  padding-left: 15px;
}

Ejemplo de la propiedad abreviada padding con tres valores:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        padding: 20px 15px 35px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Y por último, la propiedad padding puede tener cuatro valores, por ejemplo padding: 25px 50px 75px 100px;, donde el padding superior es 25px, el padding derecho es 50px, el padding inferior es 75px y el padding izquierdo es 100px.

Ejemplo de CSS padding equivalente

p {
  padding: 25px 50px 75px 100px;
}

Ejemplo de la propiedad abreviada padding con cuatro valores:

Ejemplo de la propiedad abreviada padding con cuatro valores (top, right, bottom, left — en el sentido de las agujas del reloj):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #95e5f7;
        padding: 25px 50px 75px 100px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Pruébalo tú mismo »

Padding vs. margin

El padding y el margin son fáciles de confundir. Usa padding cuando quieras espacio dentro de una caja — entre el texto y su borde o fondo. Usa margin cuando quieras espacio entre una caja y los elementos que la rodean.

Diferencias prácticas clave:

El padding comparte el color de fondo del elemento; el margin es siempre transparente.
El padding forma parte del área clicable del elemento (útil para botones y enlaces); el margin no.
Los márgenes pueden colapsar entre elementos hermanos; los paddings nunca lo hacen.

Temas relacionados

CSS margin — la contraparte exterior del borde del padding.
CSS box-sizing — controla si el padding se suma o cabe dentro del width del elemento.
padding-top, padding-right, padding-bottom, padding-left — las propiedades individuales extendidas.

Práctica

¿Qué describe correctamente la propiedad 'padding' en CSS?

La propiedad padding crea espacio adicional únicamente dentro del elemento.La propiedad padding agrega espacio adicional alrededor del contenido del elemento, fuera de los bordes definidos.La propiedad padding es una propiedad abreviada para establecer padding-top, padding-right, padding-bottom y padding-left en una sola declaración.La propiedad padding cambia el color de fondo de un elemento.La propiedad padding asigna una textura al elemento.