w3school - html www3

Margin-Top push div exterior hacia abajo

Question

Tengo un encabezado div como el primer elemento en mi envoltorio div, pero cuando agrego un margen superior a un h1 dentro del encabezado div empuja todo el encabezado div hacia abajo. Me doy cuenta de que esto sucede cada vez que aplico un margen superior al primer elemento visible en una página.

Aquí hay un fragmento de código de muestra. ¡Gracias!

div#header{
 width: 100%;
 background-color: #eee;
 position: relative;
}

div#header h1{
 text-align: center;
 width: 375px;
 height: 50px;
 margin: 50px auto;
 font-size: 220%;
 background: url(''../../images/name_logo.png'') no-repeat;
}

<div id="header">
 <h1>Title</h1>
 <ul id="navbar"></ul>
</div>

Answer 1

Agregar un poco de relleno al elemento superior del padre puede solucionar este problema.

.parent{
  padding-top: 0.01em;
}

Esto es útil si necesita que un elemento dentro del elemento primario esté visible fuera del elemento principal, por ejemplo, si está creando un efecto de superposición.

Answer 2

Corre en este tema hoy.

overflow: hidden no funcionó como se esperaba cuando tuve más elementos seguidos.

Así que traté de cambiar la propiedad de visualización del div principal y display: flex ¡funcionó!

Espero que esto pueda ayudar a alguien. :)

Answer 3

Estas son algunas de las formas de evitar el colapso de margen entre elementos padre-hijo. Usa el que mejor se adapte al resto de tu estilo:

• Configure la display en otro lugar que no sea block .
• Ponga el float en otro que none sea none .
• Retire el margen y, en su lugar, use padding . Por ejemplo, si tuvieras margin-top: 10px , reemplaza con padding-top: 10px; .
• Elimine el margen y use la position en su lugar ( absolute o relative ) con los atributos top , bottom , etc. Por ejemplo, si tiene margin-top: 10px , reemplace con position: relative; top: 10px; position: relative; top: 10px; .
• Agregue un padding o un border en el lado donde se están contrayendo los márgenes, al elemento principal . El borde puede ser 1px y transparente.
• Establecer el overflow en otro que no sea visible para el elemento principal .

Answer 4

No tengo una explicación sólida de por qué sucede esto, pero lo he solucionado cambiando el top-margin top-padding o agregando display: inline-block en display: inline-block al estilo del elemento.

EDITAR: Esta es mi teoría

Tengo la sensación de que tiene algo que ver con cómo se colapsan los márgenes (combinados).

de los márgenes de colapso del W3C :

En esta especificación, la expresión colapso de márgenes significa que los márgenes adyacentes (sin contenido no vacío, relleno o áreas de borde o espacio libre que los separa) de dos o más recuadros (que pueden estar uno junto al otro o anidados) se combinan para formar un margen único .

Mi teoría es que, dado que su primer elemento está al lado del cuerpo, los dos márgenes se combinan y se aplican al cuerpo: esto obliga al contenido del cuerpo a comenzar por debajo del margen colapsado aplicado de acuerdo con el modelo de caja .

Hay situaciones en las que los márgenes no se colapsan con los que vale la pena jugar (desde los márgenes de colapsamiento ):

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

Answer 5

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 haciendo lo siguiente:

<div>
    <h1>Test</h1>
</div>

En un depurador, abre esto y coloca el div. Notarás que el div mismo se ubica donde se detiene el margen superior del elemento H1. Este comportamiento es intencionado por el navegador.

Así que hay una solución fácil a esto sin tener que recurrir a hacks extraños, ya que la mayoría de los mensajes aquí lo hacen (sin insultos previstos, es la verdad) - simplemente regrese a la explicación original - ...if the first element inside a container has a top margin... - Después de eso, necesitarías el primer elemento en un contenedor para NO tener 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. Agregue a :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 del marcado anterior modificarías tu div como tal:

<div class="top-margin-fix">
    <h1>Test</h1>
</div>

¿Por qué funciona esto?

El primer elemento en un contenedor, si no tiene margen superior, establece la posición del inicio del margen superior del siguiente elemento. Al agregar un :before pseudo-elemento, el navegador realmente agrega un elemento no semántico (en otras palabras, bueno para SEO) en el contenedor principal antes de su primer elemento.

Q. ¿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 puedes 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 quieras hacer otras cosas con tus elementos, eliminando a propósito 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.

Answer 6

put overflow:auto en el div principal
ver más en este enlace

Answer 7

display: flex funcionará en este caso. Muestra la display: flex; elemento principal display: flex; y luego déle un margen según su requisito a la etiqueta h1 .