Sé que este es un problema antiguo, lo he encontrado muchas veces. El problema es que todas las soluciones aquí son cortes que potencialmente podrían tener consecuencias no deseadas.
En primer lugar, hay una explicación fácil para el problema de raíz. Debido a la forma en que funciona el colapso de margen, si el primer elemento dentro de un contenedor tiene un margen superior, ese margen superior se aplica de manera efectiva al propio contenedor padre. Puede probar esto por su cuenta de la siguiente manera:
<div>
<h1>Test</h1>
</div>
En un depurador, abrir esto y pase el div. Notarás que el div mismo en realidad se ubica donde el margen superior del elemento H1 detiene. Este comportamiento es intencionado por el navegador.
Así que hay una solución fácil para esto sin tener que recurrir a hacks extraños, como la mayoría de los mensajes aquí (sin insultos, es la verdad) - simplemente vuelve a la explicación original - ...if the first element inside a container has a top margin... - A continuación, por lo tanto, necesitaría el primer elemento en un contenedor en NO tienen un margen superior. Está bien, pero ¿cómo lo haces sin agregar elementos que no interfieran semánticamente con tu documento?
¡Fácil! Pseudo-elementos! Podrías hacer esto a través de una clase o un mixin predefinido.Añadir un :before pseudo-elemento:
CSS a través de una clase:
.top-margin-fix:before {
content: ' ';
display: block;
width: 100%;
height: .0000001em;
}
Con esto, siguiendo el ejemplo de marcado anterior deberá modificar su div como tal:
<div class="top-margin-fix">
<h1>Test</h1>
</div>
Por qué ¿Esto funciona?
El primer elemento de un contenedor, si no tiene margen superior, establece la posición del inicio del margen superior del siguiente elemento. Al agregar un pseudo-elemento :before, el navegador realmente agrega un elemento no semántico (en otras palabras, bueno para SEO) al contenedor principal antes de, su primer elemento.
P. ¿Por qué la altura: .0000001em?
A. Se requiere una altura para que el navegador empuje el elemento de margen hacia abajo. Esta altura es efectivamente cero, pero aún le permitirá agregar relleno al contenedor principal. Dado que es efectivamente cero, tampoco tendrá un efecto en el diseño del contenedor. Hermosa.
Ahora puede agregar una clase (o mejor, en SASS/LESS, mixin!) Para solucionar este problema en lugar de agregar estilos de visualización extraños que causarán consecuencias inesperadas cuando quiera hacer otras cosas con sus elementos, a propósito eliminando los márgenes en los elementos y/o reemplazándolo con relleno, o estilos de posición/flotación extraños que realmente no están destinados a resolver este problema.
'overflow: hidden' es mejor para el 90% de los casos. – vsync
¿Por qué se desbordará: oculto será mejor? – peterchon
@peterchon - porque el auto puede causar barras de desplazamiento – vsync