- Teoría
- Teoría
La propiedad padding: el relleno
Ya organizamos el contenido del encabezado en dos columnas, como en el diseño. Pero le falta un poco de espacio libre. Para que los elementos no queden pegados a sus límites, agregaremos relleno.
El relleno es la distancia entre el contenido de una caja y su borde.
La propiedad padding permite agregar relleno. Cuando es igual en los cuatro lados, basta con escribir:
.element {
padding: 15px;
}Este código agrega 15px de relleno a cada lado. Esta forma de escribirlo se llama abreviada. Más adelante usaremos una forma abreviada similar con margin.
Si el relleno debe ser distinto en cada lado, podemos usar las propiedades individuales:
.element {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}padding-top define el relleno superior; padding-right, el derecho; padding-bottom, el inferior; y padding-left, el izquierdo.
No es necesario agregar relleno a todos los lados. Por ejemplo, si solo hace falta en la parte superior, basta con usar padding-top.
Veamos el diseño del encabezado:
El relleno varía según el lado. Lo definiremos con las propiedades individuales.
Cuando tres lados tienen el mismo relleno y el cuarto es distinto, a veces se usa este recurso:
.element {
padding: 15px;
padding-bottom: 30px;
}Primero se define el mismo relleno para todos los lados y después se redefine el que debe ser diferente.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
Agrega relleno (padding) al encabezado:
- Superior:
10px. - Derecho:
10px. - Inferior:
10px. - Izquierdo:
20px.