Docs ejecutables de CSS: Padding en CSS

Q: ¿En qué orden van los valores de la abreviatura padding?

En el sentido de las agujas del reloj desde arriba: padding: top right bottom left;. Con tres valores es arriba, izquierda y derecha, abajo; con dos, arriba y abajo y luego izquierda y derecha; con uno, los cuatro lados.

Q: ¿El padding aumenta el tamaño de un elemento?

Con el box-sizing: content-box por defecto, sí: el padding se suma a width y height. Con box-sizing: border-box, el padding se toma de dentro del ancho, así que el elemento conserva el tamaño que definiste.

Q: ¿Cómo agrego padding en HTML?

Con CSS, en una hoja de estilo o en un atributo style: . HTML no tiene un atributo de padding para los elementos en general; el viejo atributo cellpadding de las tablas está obsoleto y se reemplaza con padding en td y th.

Qué es el padding

El padding es el espacio dentro de un elemento, entre su contenido y su borde. Toma el fondo del elemento, así que es la propiedad que le da aire a un botón, una tarjeta o una etiqueta.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

La zona azul es el contenido. La franja verde a su alrededor son los 24px de padding en cada lado, y el borde queda por fuera.

La abreviatura padding: 1, 2, 3 o 4 valores

padding define los cuatro lados en una sola declaración. La cantidad de valores decide qué lado recibe cuál, en el sentido de las agujas del reloj desde arriba:

Declaración	Arriba	Derecha	Abajo	Izquierda
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

Dos valores significan "vertical, horizontal". Tres valores significan "arriba, horizontal, abajo". Cuatro dan la vuelta al reloj: arriba, derecha, abajo, izquierda (en inglés se recuerda con la palabra TRouBLe: top, right, bottom, left).

Escribe cualquier abreviatura abajo. La caja se vuelve a dibujar y el navegador informa qué recibió cada lado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prueba 8px, 8px 24px, 0 0 40px y 1em 5%. Un valor inválido, como -10px, se ignora y la caja conserva el último padding válido.

Un lado a la vez

Cada lado tiene su propia propiedad, que es más clara que una abreviatura de cuatro valores cuando solo quieres cambiar uno:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Una abreviatura seguida de un lado es un patrón común: defines todo y luego ajustas un lado.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Aquí el orden importa: una abreviatura padding escrita después de padding-bottom volvería a poner la parte de abajo en 16px.

Padding lógico: padding-inline y padding-block

padding-left y padding-right son físicas: se quedan en el mismo lado en todos los idiomas. Las propiedades lógicas, en cambio, siguen la dirección de escritura, que es lo que necesitas en un sitio que también se muestra de derecha a izquierda:

Propiedad lógica	En español (izquierda a derecha)	En árabe (derecha a izquierda)
`padding-inline-start`	izquierda	derecha
`padding-inline-end`	derecha	izquierda
`padding-inline`	izquierda y derecha	derecha e izquierda
`padding-block`	arriba y abajo	arriba y abajo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

El padding agranda la caja (salvo con border-box)

Por defecto, width es solo el ancho del contenido, y el padding se suma por encima. Una caja con width: 200px y padding: 20px mide 240px de ancho:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

box-sizing: border-box mantiene la caja en 200px y toma el padding de dentro. La página del modelo de caja explica el cálculo completo.

Padding en porcentaje

Un padding en porcentaje se mide respecto al ancho del padre, en los cuatro lados, incluidos arriba y abajo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

De ahí viene el viejo truco de "padding-top: 56.25%" para cajas de video 16:9. Hoy aspect-ratio: 16 / 9 hace lo mismo directamente.

Padding en botones y enlaces

El padding es la forma correcta de agrandar un enlace o un botón, porque el padding es parte del elemento y, por lo tanto, parte de lo que puedes clicar o tocar. El margin agregaría espacio, pero no un objetivo más grande.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Valores que acepta padding

Valor	Ejemplo	Notas
Longitud	`12px`, `1rem`, `0.5em`	`em` escala con el tamaño de fuente del elemento
Porcentaje	`5%`	Del ancho del bloque contenedor
`0`	`padding: 0`	No necesita unidad
Negativo	`-10px`	Inválido, se ignora
`auto`	`auto`	Inválido para padding (funciona con margin)

Errores comunes

Orden incorrecto en la abreviatura de cuatro valores. Es arriba, derecha, abajo, izquierda, en el sentido de las agujas del reloj.
Una caja que crece al agregar padding. Define box-sizing: border-box.
Usar padding para separar dos elementos. El espacio entre elementos es margin; el padding es espacio dentro de uno. Consulta margin vs padding.
Padding vertical en un enlace inline que se superpone a otras líneas. Hazlo inline-block.
Padding negativo o padding: auto. Los dos son inválidos y se ignoran en silencio.

Preguntas frecuentes

¿Qué es el padding en CSS?

El padding es el espacio entre el contenido de un elemento y su borde. Forma parte del elemento, así que muestra su color de fondo y agranda el área clicable de un enlace o un botón.

¿En qué orden van los valores de la abreviatura padding?

En el sentido de las agujas del reloj desde arriba: padding: top right bottom left;. Con tres valores es arriba, izquierda y derecha, abajo; con dos, arriba y abajo y luego izquierda y derecha; con uno, los cuatro lados.

¿El padding aumenta el tamaño de un elemento?

Con el box-sizing: content-box por defecto, sí: el padding se suma a width y height. Con box-sizing: border-box, el padding se toma de dentro del ancho, así que el elemento conserva el tamaño que definiste.

¿Respecto a qué se calcula un padding en porcentaje?

Respecto al ancho del bloque contenedor, en los cuatro lados. padding-top: 50% es la mitad del ancho del padre, no de su alto, y por eso los viejos trucos de relación de aspecto usaban padding vertical.

¿El padding puede ser negativo?

No. Un valor de padding negativo es inválido y la declaración se ignora. Para sacar contenido hacia afuera, usa un margin negativo.

¿Cómo agrego padding en HTML?

Con CSS, en una hoja de estilo o en un atributo style: <div style="padding: 16px;">. HTML no tiene un atributo de padding para los elementos en general; el viejo atributo cellpadding de las tablas está obsoleto y se reemplaza con padding en td y th.

Conceptos relacionados