Propiedad CSS padding-left
Cómo usar la propiedad CSS padding-left para definir el espacio de relleno a la izquierda de un elemento. Valores y ejemplos.
La propiedad CSS padding-left establece el ancho del área de relleno en el lado izquierdo de un elemento. El relleno es el espacio entre el contenido de un elemento y su borde — aumentar padding-left empuja el contenido hacia la derecha, alejándolo del borde izquierdo, sin afectar a los elementos vecinos.
Esta página cubre la sintaxis de padding-left, las unidades y palabras clave que acepta, cómo se calculan los porcentajes, cómo interactúa con la propiedad abreviada padding y el modelo de caja, además de ejemplos ejecutables.
Cuándo usar padding-left
Usa padding-left (en lugar de la forma abreviada padding) cuando solo necesites ajustar un lado y quieras mantener la regla explícita y fácil de leer — por ejemplo, para sangrar texto de listas, desplazar una etiqueta respecto a un icono, o crear espacio a la izquierda de una tarjeta.
Si estás definiendo los cuatro lados a la vez, prefiere la forma abreviada padding. Las propiedades individuales — padding-left, padding-right, padding-top y padding-bottom — son útiles para sobrescribir un solo valor después de que la forma abreviada haya establecido el resto.
El relleno no es margen. El relleno se encuentra dentro del borde del elemento y comparte el fondo del elemento; margin-left añade espacio fuera del borde y siempre es transparente. Si quieres separar un elemento de su vecino, usa margen; para empujar el contenido hacia adentro, usa relleno.
No se permiten valores negativos. A diferencia de los márgenes, el relleno nunca puede ser negativo.
En elementos en línea como <span>, el relleno horizontal sí se aplica (y es visible), pero no separa las cajas de línea circundantes — por lo que verticalmente parece no tener efecto de diseño. Para un control total, establece el elemento como display: inline-block o display: block.
Cómo afecta padding-left al modelo de caja
De forma predeterminada, el navegador usa el modelo de caja CSS estándar, donde el ancho renderizado de un elemento es su width más su relleno izquierdo y derecho más sus bordes. Por lo tanto, agregar padding-left: 100px hace que el elemento sea 100px más ancho en total.
Si deseas que el relleno quede incluido dentro del width declarado en lugar de sumarse a él, establece box-sizing: border-box. Esta es la causa más común de "mi diseño se desbordó cuando agregué relleno" — border-box lo soluciona.
| Valor inicial | 0 |
|---|---|
| Se aplica a | Todos los elementos, con excepción de cuando la propiedad display está definida como table-row-group, table-header-group, table-footer-group, table-row, table-column-group y table-column. También se aplica a ::first-letter. |
| Heredado | No. |
| Animable | Sí. El espacio de relleno es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.paddingLeft = "40px"; |
Sintaxis
Sintaxis de la propiedad CSS padding-left
padding-left: length | percentage | initial | inherit;El valor es más frecuentemente una longitud fija (px, em, rem, cm, …) o un porcentaje. Los porcentajes se resuelven en función del ancho del bloque contenedor — incluso para el relleno izquierdo/derecho y superior/inferior — por lo que un porcentaje de relleno responsivo escala con el ancho del contenedor.
Ejemplo con un valor en px
Un valor de píxeles fijo es la opción más predecible. Aquí padding-left: 100px desplaza el texto del párrafo 100px desde el borde izquierdo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 100px;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Resultado
Ejemplo con un valor en cm
Cualquier unidad de longitud absoluta funciona de la misma manera. Aquí el relleno se indica en centímetros:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 3cm;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Ejemplo con un valor porcentual
Un porcentaje es relativo al ancho del bloque contenedor, por lo que la sangría crece y se reduce con el diseño. Observa que primero se declara la forma abreviada padding: 20px y luego padding-left: 15% sobrescribe solo el lado izquierdo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 20px;
padding-left: 15%;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| length | Establece el relleno izquierdo como una longitud fija (px, pt, em, rem, cm, etc.). El valor predeterminado es 0. Las longitudes negativas no son válidas. | Pruébalo » |
| % | Establece el relleno izquierdo como un porcentaje del ancho del bloque contenedor. | Pruébalo » |
| initial | Restablece la propiedad a su valor predeterminado (0). | Pruébalo » |
| inherit | Toma el valor calculado de padding-left del elemento padre. (El relleno no se hereda de forma predeterminada.) |
Propiedades relacionadas
padding— la forma abreviada que establece los cuatro lados a la vez.padding-right,padding-top,padding-bottom— las otras propiedades individuales de un solo lado.margin-left— añade espacio fuera del borde en lugar de dentro.box-sizing— controla si el relleno se suma o se incluye dentro delwidthdel elemento.display— afecta cómo se comporta el relleno horizontal en elementos en línea frente a elementos de bloque.