La propiedad margin (márgenes)
El tamaño de dichos márgenes se puede alterar en conjunto (de forma general) o de forma específica a cada una de las zonas del elemento (izquierda, derecha, arriba o abajo). Veamos primero las propiedades específicas para cada zona:
| Propiedad | Valor | Significado |
|---|---|---|
| margin-top | auto | size | Establece un tamaño de margen superior. |
| margin-left | auto | size | Establece un tamaño de margen a la izquierda. |
| margin-right | auto | size | Establece un tamaño de margen a la derecha. |
| margin-bottom | auto | size | Establece un tamaño de margen inferior. |
Podemos aplicar diferentes márgenes a cada zona de un elemento cada una de estas propiedades, o dejando el navegador que lo haga de forma automática indicando el valor auto.
Existe un truco muy sencillo y práctico para centrar horizontalmente un elemento en pantalla. Basta con aplicar un ancho fijo al contenedor: width: 300px (por ejemplo) y luego aplicar margin: auto. De esta manera, el navegador, al conocer el tamaño del elemento (y por omisión, el resto del tamaño de la ventana) se encarga de repartirlo equitativamente entre el margen izquierdo y el margen derecho, quedando centrado el elemento. Para salir de dudas, prueba el siguiente código:
<style>
.box {
width: 300px;
height: 300px;
background: purple;
margin: auto;
}
</style>
<div class="box">
</div>
La propiedad padding (rellenos)
Al igual que con los márgenes, los padding tienen varias propiedades para indicar el relleno de cada zona:
| Propiedad | Valor | Significado |
|---|---|---|
| padding-top | 0 | size | Establece un tamaño de relleno superior. |
| padding-left | 0 | size | Establece un tamaño de relleno a la izquierda. |
| padding-right | 0 | size | Establece un tamaño de relleno a la derecha. |
| padding-bottom | 0 | size | Establece un tamaño de relleno inferior. |
Como se puede observar en la tabla, por defecto no hay relleno (el relleno está en cero), aunque puede modificarse tanto con las propiedades anteriores como la propiedad de atajo que veremos en breve.
Atajo: Modelo de cajas
Al igual que en otras propiedades de CSS, también existe una propiedad de atajo denominada margin y padding. Con estas propiedades evitamos tener que escribir valores de cada parte (izquierda, derecha, arriba, abajo…), especialmente importante si es el mismo valor en las cuatro.
No obstante, tenemos 4 modalidades, que dependen del número de parámetros de la propiedad:
| Propiedad | Valores | Significado |
|---|---|---|
| padding o margin | size | 1 parámetro. Establece el mismo margen a todos los lados. |
| size size | 2 parámetros. Establece el margen para top/bottom y left/right. | |
| size size size | 3. parámetros. Establece el margen para top, left/right y bottom | |
| size size size size | 4 parámetros. Establece el margen top, right, bottom y left. |
Cabe destacar que la propiedad border-width pasa por lo mismo que con padding y margin, actuando en este caso en relación al grosor del borde de un elemento. Veamos algunos ejemplos:
.examples {
margin: 15px;
/* Equivalente a margin: 15px 15px 15px 15px; */
margin: 20px 10px;
/* Equivalente a margin: 20px 10px 20px 10px; */
margin: 20px 10px 5px;
/* Equivalente a margin: 20px 10px 5px 10px; */
}
