Terror del margen CSS; El margen agrega espacio fuera del elemento principal [duplicado]
Mis márgenes CSS no se comportan como quiero o espero que lo hagan. Parece que el margen superior de mi encabezado afecta las etiquetas div que lo rodean.
Esto es lo que quiero y espero:
...pero esto es con lo que termino:
Fuente:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>
<style type="text/css">
body {
margin:0;
}
#page {
margin:0;
background:#FF9;
}
#page_container {
margin:0 20px;
}
h1 {
margin:50px 0 0 0;
}
</style>
</head>
<body>
<div id="page">
<div id="page_container">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
<h2 id="site-description">Description</h2>
</hgroup>
</header>
</div>
</div>
He exagerado el margen en este ejemplo. El margen predeterminado del navegador en la etiqueta h1 es algo más pequeño y, en mi caso, uso Twitter Bootstrap, con Normalizer.css que establece el margen predeterminado en 10px. No es tan importante, el punto principal es; No puedo, no debería, no quiero cambiar el margen de la etiqueta h1.
Supongo que es similar a mi otra pregunta; ¿Por qué este estilo CSS de margen superior no funciona? . La pregunta es ¿cómo soluciono este problema específico?
He leído algunos hilos sobre problemas similares, pero no he encontrado respuestas ni soluciones reales. Se sumando padding:1px;o border:1px;solucionando el problema. Pero eso sólo añade nuevos problemas, ya que no quiero un relleno ni un borde en mis etiquetas div.
¿Debe haber una mejor solución, la mejor práctica? Esto debe ser bastante común.
Agregue overflow:autoa su #pagediv.
Ejemplo de jsFiddle
Y mientras lo hace, compruebe los márgenes que colapsan .
Agregue cualquiera de las siguientes reglas:
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
Esto es causado por collapsing margins. Vea un artículo sobre este comportamiento aquí .
Según el artículo:
La especificación W3C define los márgenes de colapso de la siguiente manera:
“En esta especificación, la expresión márgenes colapsados significa que los márgenes contiguos (sin contenido no vacío, relleno o áreas 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 solo margen”.
Esto también es válido para los elementos padre-hijo.
Todas las respuestas incluyen una de las posibles soluciones:
Hay otras situaciones en las que los elementos no tienen sus márgenes colapsados:
- elementos flotantes
- elementos absolutamente posicionados
- elementos de bloque en línea
- elementos con desbordamiento configurado en cualquier cosa que no sea visible (no colapsan los márgenes con sus hijos).
- elementos borrados (no colapsan sus márgenes superiores con el margen inferior de su bloque principal).
- el elemento raíz
El problema era que los padres no tenían en cuenta la altura de los niños. Agregar display:inline-block;lo hizo por mí.
CSS completo
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}
Ver violín
