Ejemplos del box model
Ejemplo 1
Supongamos el siguiente documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Relleno y margen</title>
<style>
#relleno {
background-color: #eccc68; /* amarillo */
padding: 2em; /*se aplica a izquierda, derecha arriba y abajo */
}
#rellenoIzq {
background-color: #ff7f50; /* naranja */
padding-left: 2em; /*se aplica a izquierda */
}
#rellenoMargen {
background-color: #70a1ff; /* azul */
margin-bottom: 2em; /*se aplica abajo*/
}
</style>
</head>
<body>
<section id="relleno">Sección con relleno (todos los lados)</section>
<section>Sección sin relleno</section>
<section id="rellenoMargen">Sección sin relleno, pero con margen inferior</section>
<section id="rellenoIzq">Sección con relleno solo a la izquierda</section>
</body>
</html>
El espacio en blanco (que es el color de fondo predeterminado de <body>) entre las secciones azul y naranja se debe al margen inferior de la sección azul (#rellenoIzq).
En el navegador se visualizaría de la siguiente forma:
Probar en el navegador
Ejemplo 2
Supogamos el siguiente documento HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Relleno y margen</title>
<style>
#borde1 {
background-color: #ffa502; /* naranja */
border-color: #2f3542; /* negro */
border-style: solid;
margin-bottom: 18px;
}
#borde2 {
background-color: #ced6e0; /* gris */
border-width: 4px;
border-left-color: #ff4757; /* rojo */
border-top-color: #ff4757; /* rojo */
border-left-style: dashed;
border-top-style: dashed;
}
</style>
</head>
<body>
<section id="borde1">Sección con borde1</section>
<section id="borde2">Sección con borde2</section>
</body>
</html>
El espacio en blanco (que es el color de fondo predeterminado de <body>) entre las dos secciones se debe al margen inferior aplicado en la primera sección (#borde1).
En el navegador se visualizaría de la siguiente forma:
Probar en el navegador