Margen superior empuja la división exterior hacia abajo

Tengo un div de encabezado como primer elemento en mi div contenedor, pero cuando agrego un margen superior a un h1 dentro del div de encabezado, empuja todo el div de encabezado hacia abajo. Me doy cuenta de que esto sucede cada vez que aplico un margen superior al primer elemento visible de 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>

Apr 21 '10 12:04 Danny

No tengo una explicación sólida de por qué sucede esto, pero lo solucioné cambiando a top-margino top-paddingagregando display: inline-blockestilo al elemento.

EDITAR: Esta es mi teoría.

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

de Márgenes colapsados ​​del W3C :

En esta especificación, la expresión márgenes colapsados ​​significa que los márgenes contiguos (sin contenido no vacío, áreas de relleno o de borde o espacio libre que los separe) de dos o más cuadros (que pueden estar uno al lado del otro o anidados) se combinan para formar un único margen. .

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 debajo del margen contraído aplicado de acuerdo con el modelo de caja .

Hay situaciones en las que los márgenes no colapsan con las que valdría la pena jugar (de Collapsing Margins ):

* 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

Apr 21 '2010 05:04 digitaldreamer

Estas son algunas de las formas de evitar el colapso de los márgenes entre elementos padre-hijo. Utiliza el que mejor combine con el resto de tu estilismo:

• Establecer displayen otro que no sea block.
• Establecer floaten otro que no sea none.
• Elimine el margen y utilice en su lugar padding. Por ejemplo, si tuviera margin-top: 10px, reemplácelo con padding-top: 10px;.
• Elimine el margen y use en su lugar position( absoluteo relative) con atributos top, bottom, etc. Por ejemplo, si tuviera margin-top: 10px, reemplácelo con position: relative; top: 10px;.
• Agregue a paddingo a borderen el lado donde los márgenes se contraen, al elemento principal . El borde puede ser de 1px y transparente.
• Establecer overflowen otro que no visiblesea el elemento principal .

Feb 24 '2015 17:02 Jesús Carrera