Teoría
Teoría

Márgenes que salen del contenedor

Los márgenes verticales también pueden «salirse» del contenedor padre.

En un caso como el de este ejemplo, sin borde ni relleno superior en el padre, el margen superior del bloque interior puede aparecer por encima del padre y dejar el bloque interior pegado a su borde superior. Es decir, el margen superior del elemento interior «se sale» del elemento padre:

Un margen que sale del contenedor padre

Si el elemento padre también tiene un margen superior, se usará el mayor de los dos: el suyo o el que «salió» del elemento interior.

Para evitar este efecto, puedes añadir al elemento padre un relleno superior (padding-top) o un borde superior:

Cómo evitar que el margen salga del contenedor padre

Los márgenes y el relleno siempre se suman.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Márgenes que salen del contenedor</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block-1"> <div class="block-2">Bloque 2</div> Bloque 1 </div> </body> </html>

CSS

body { padding: 0 20px; } .block-1 { height: 100px; border: none; text-align: center; } .block-2 { margin-left: 20px; margin-right: 20px; text-align: center; }

ObjetivosRealizado

Asigna margin-top: 20px; al segundo bloque.
Asigna margin-top: 40px; al primer bloque.
Después, asigna border: 1px solid white; al primer bloque.
Asígnale también padding-top: 20px;.

Observa la separación entre el borde del primer bloque y el segundo bloque. Será de 40px (2 cuadritos).