atributo - label html
¿Por qué el margen no debería estar contenido por el elemento padre? (1)
Así es como funciona CSS de acuerdo con W3C :
En esta especificación, la expresión colapso de los márgenes significa que los márgenes adyacentes (sin 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 margen individual
Más específico para su caso del div principal:
Si los márgenes superior e inferior de una caja son contiguos, entonces es posible que los márgenes colapsen a través de ella. En este caso, la posición del elemento depende de su relación con los otros elementos cuyos márgenes se están contrayendo.
- Si los márgenes del elemento están contraídos con el margen superior de sus padres, el borde del borde superior del cuadro se define como el mismo que el del padre.
- De lo contrario, el padre del elemento no participa en el colapso del margen, o solo está involucrado el margen inferior del padre. La posición del borde del borde superior del elemento es la misma que si el elemento tuviera un borde inferior distinto de cero.
Lo mejor que puedo hacer es señalarte a "Colapsando Márgenes" en el sitio (por Tommy Olsson y Paul O''Brien) . Hacen una explicación muy detallada con ejemplos que muestran exactamente los comportamientos que demostró en el código de ejemplo de la pregunta.
Cuando un elemento con un margen está contenido dentro de otro elemento, el padre no ajusta consistentemente ese margen.
Muchas cosas harán que los padres envuelvan el margen del niño:
- borde: sólido;
- posición: absoluta;
- pantalla: bloque en línea;
- desbordamiento: automático
(Y esto solo por pequeñas pruebas, sin duda hay más).
Supongo que esto tiene que ver con el colapso de los márgenes, pero:
- La página de especificaciones del W3C no tiene descripción de dicho comportamiento.
- No hay márgenes superpuestos aquí.
- El comportamiento de todos los navegadores parece ser consistente en este tema.
- El comportamiento se ve afectado por factores desencadenantes que no están relacionados con los márgenes
¿Cuál es la lógica por la cual un elemento que se desborda por defecto? Auto debe contener un material diferente al que el desbordamiento se establece en automático.
¿Por qué debería todo, excepto el comportamiento predeterminado de un div regular, suponer que el margen está contenido por el padre, y por qué el valor predeterminado normal no debe incluir el margen?
EDIT: la respuesta final es que el W3C realmente especifica este comportamiento, pero eso
- Las especificaciones no tienen ningún sentido.
- Las especificaciones se mezclan, sin ninguna palabra de explicación :
- ''márgenes libres'' (los márgenes que tocarían la parte superior o inferior de su matriz no están contenidos por el padre) y
- ''márgenes colapsados'' (los márgenes adyacentes pueden superponerse).
Manifestación:
<!doctype html>
<html>
<head>
<title>Margins overextending themselves</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
body{
margin:0;
}
div.b{
background-color:green;
}
div.ib{
display:inline-block;
background-color:red;
}
div.pa{
background-color:yellow;
position:absolute;
bottom:0; right:0;
}
div.oa{
background-color:magenta;
overflow:auto;
}
div.brdr{
background-color:pink;
border:solid;
}
h1{margin:100px; width:250px; border:solid;}
</style>
</head>
<body>
<div class="b">
<h1>Is the margin contained?</h1>
</div>
<div class="ib">
<h1>Is the margin contained?</h1>
</div>
<div class="pa">
<h1>Is the margin contained?</h1>
</div>
<div class="oa">
<h1>Is the margin contained?</h1>
</div>
<div class="brdr">
<h1>Is the margin contained?</h1>
</div>
</body>
</html>`