html - style - Terror del margen de CSS; El margen agrega espacio al elemento padre externo
margin-left html español (3)
Agregar overflow:auto a su #page div.
Y revisa los márgenes colapsables mientras lo haces.
Mis márgenes de css no se comportan de la manera que quiero ni espero que lo hagan. Parece que mi encabezado marginal de 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 de navegador predeterminado en h1-tag es algo menor, y en mi caso utilizo 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 en 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 puedo resolver este problema específico?
He leído algunos hilos sobre problemas similares, pero no he encontrado respuestas ni soluciones reales. Sé agregar padding:1px; o border:1px; resuelve el problema Pero eso solo agrega nuevos problemas, ya que no quiero un relleno ni un borde en mis etiquetas div.
Debe haber una solución mejor y de mejores prácticas. Esto debe ser bastante común.
Agregue cualquiera de las siguientes reglas:
float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;
Esto es causado por el collapsing margins . Vea un artículo sobre este comportamiento here .
De acuerdo con el artículo:
La especificación W3C define los márgenes colapsables de la siguiente manera:
"En esta especificación, la expresión que colapsa los márgenes significa que los márgenes adyacentes (no hay contenido no vacío, relleno o áreas de borde, o espacio separado para separarlos) de dos o más recuadros (que pueden estar uno junto al otro o anidados) se combinan para formar un solo margen ".
Esto también es cierto para 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 colapsadas:
- elementos flotados
- elementos absolutamente posicionados
- elementos de bloque en línea
- elementos con desbordamiento configurados en cualquier otra 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 del bloque principal).
- el elemento raíz
El problema fue que los padres no tomaron en cuenta a los niños en cuanto a la estatura. Agregar display:inline-block; lo hizo por mí.
CSS completo
#page {
margin:0;
background:#FF9;
display:inline-block;
width:100%;
}