El relleno es el espacio horizontal y vertical que queda alrededor del contenido de un elemento HTML, justo hasta el límite en el que se encuentra el borde (aunque no esté definido). Por defecto, los elementos no tienen relleno, y se define una longitud mediante la propiedad abreviada padding.
El valor por defecto de la propiedad padding equivale a 0. Si se especifica un valor diferente, debe ser una unidad de medida de longitud, ya sea absoluta (píxeles, puntos, centímetros…) o relativa (porcentajes, em, rem, etc). También puede tener los valores inherit, initial, unset y revert.
Esta propiedad se puede aplicar a todos los elementos HTML exceptuando a algunos elementos de tablas como <thead>, <tfoot>, <colgroup> y <col>. También se puede aplicar a los pseudoelementos.
¿Cómo se especifican las longitudes del relleno? Si se usa un único valor, este valor se aplicará a los cuatro lados del elemento: arriba (top), derecha (right), abajo (bottom) e izquierda (left). Veamos un ejemplo:
.selector {
padding: 15px;
}
Con este código se aplicará un relleno de 15 píxeles a los cuatro lados de los elementos que tengan la clase selector. Veamos otro ejemplo:
.selector {
padding: 8px 16px;
}
En este caso se ha indicado dos valores. El primero hace referencia a los lados verticales (8 píxeles arriba y abajo), mientras que el segundo hace referencia a los lados horizontales (16 píxeles a izquierda y derecha). Veamos otro caso:
.selector {
padding: 8px 16px 4px;
}
Estos tres valores se interpretan de la siguiente manera: 8 píxeles de relleno en la parte superior, 16 píxeles de relleno a izquierda y derecha (horizontales) y 4 píxeles abajo. En resumen: arriba, horizontales y abajo. Finalmente:
.selector {
padding: 8px 16px 4px 2px;
}
Cuando se indica los cuatro valores se leen de izquierda a derecha en el sentido de las agujas de un reloj, por lo que el orden es el siguiente: arriba (8 píxeles), derecha (16 píxeles), abajo (4 píxeles) e izquierda (2 píxeles).
Tabla resumen de valores abreviados:
| Ejemplos | Descripción |
|---|---|
padding: 1px | A los cuatro lados. |
padding: 1px 2px | Vertical, horizontal. |
padding: 1px 2px 3px | Arriba, horizontal, abajo. |
padding: 1px 2px 3px 4px | Arriba, derecha, abajo, izquierda. |
Valores globales de padding:
| Valor | Descripción |
|---|---|
inherit | Hereda el valor aplicado en el elemento padre. |
initial | Fuerza el uso del valor inicial. |
unset | Restablece una propiedad a su valor heredado, y si no hereda la restablece a su valor inicial. |
revert | Restablece una propiedad a su valor heredado, y si no hereda la restablece a la hoja de estilos aplicada por el usuario en el navegador, y si no la tiene la restablece a su valor inicial. |
Propiedades específicas de relleno
También es posible definir los rellenos mediante cuatro propiedades CSS específicas que, de forma independiente y sin abreviaturas, permiten definir el relleno para cada uno de los lados de un elemento HTML.
| Propiedad | Descripción |
|---|---|
padding-top | Especifica el relleno en la parte superior. |
padding-right | Especifica el relleno en la parte derecha. |
padding-bottom | Especifica el relleno en la parte inferior. |
padding-left | Especifica el relleno en la parte izquierda. |
Vamos a visualizar algunos ejemplos.
La propiedad ‘padding-top’
La propiedad padding-top permite especificar un valor de relleno únicamente en la parte superior de un elemento HTML. En el ejemplo siguiente añadimos un borde naranja para que se observe el relleno superior.
.pt {
border: 1px solid #ff7f2a;
padding-top: 15px;
}
Resultado:
Texto con relleno por arriba.
La propiedad ‘padding-right’
Si en lugar de arriba queremos que el relleno se muestre a la derecha de un elemento HTML usaremos la propiedad padding-right. Debido a que los párrafos (<p>) son elementos de bloque, ocupan la línea entera y el efecto sólo será visible si el texto alcanza hasta el final de la línea.
.pr {
border: 1px solid #ff7f2a;
padding-right: 15px;
}
Resultado:
Texto con relleno por la derecha. Se añade más texto hasta alcanzar el final de la línea con el fin de ver que hay un espacio entre el contenido y el borde de la derecha. ¿Lo ves? Puedes reducir el tamaño de la ventana para forzar al elemento a tener un ancho inferior.
La propiedad ‘padding-bottom’
Mediante la propiedad CSS padding-bottom especificaremos un valor de relleno que será visible en la parte inferior de un elemento HTML. Por tanto, en el ejemplo siguiente se observa un espaciado por debajo del párrafo.
.pb {
border: 1px solid #ff7f2a;
padding-bottom: 15px;
}
Resultado:
Texto con relleno por abajo.
La propiedad ‘padding-left’
Finalmente, la propiedad padding-left es la que permite indicar valores de relleno que se mostrarán en la parte izquierda de un elemento HTML.
.pl {
border: 1px solid #ff7f2a;
padding-left: 15px;
}
Resultado:
Texto con relleno por la izquierda.
