margin

►Propiedad margin establecer de algunos o todos los cuatro márgenes de un elemento

Cada margen define su propio valor por defecto

Utilizando la propiedad margin, es posible establecer de forma abreviada el mismo valor a todos los márgenes de un elemento:

#contenedor {
margin: 100px;
}

Permite establecer uno, dos, tres o los cuatro márgenes de forma simultánea.

• Si se indican dos valores, el primero hace referencia a los márgenes verticales y el segundo es el valor de los márgenes horizontales:

#contenedor{
margin: 100px 50px;
}

Equivale a:

#contenedor{
margin-top: 100px;
margin-right: 50px;
margin-bottom: 100px;
margin-left: 50px;
}

• Si se indican tres valores, el primero hace referencia al margen superior, el segundo es el valor de los márgenes horizontales y el tercero es el margen inferior:

#contenedor{
margin: 20px 30px 40px;
}

Equivale a:

#contenedor{
margin-top: 20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 30px;
}

• Si se indican cuatro valores, el primero es el margen superior, el segundo es el margen derecho, el tercero es el margen inferior y el cuarto es el margen izquierdo, de modo que las siguientes reglas CSS son equivalentes:

#contenedor {
margin: 10px 20px 30px 40px;
}