Dlaczego element nadrzędny nie zawiera marginesu?

Question

Dlaczego element nadrzędny nie zawiera marginesu?

Gdy element z marginesem jest zawarty w innym elemencie, rodzic nie konsekwentnie zawija ten margines.

Wiele rzeczy spowoduje, że rodzic zawinie margines dziecka:

border: solid;
position: absolute;
display:inline-block;
overflow: auto

(i to tylko z małych testów, bez wątpienia jest więcej.)

Zakładam, że ma to związek ze spadaniem marginesów, ale:

spec W3C strona nie posiada opisu takiego zachowania.
tutaj nie ma nakładających się marginesów.
zachowanie wszystkich przeglądarek wydaje się być spójne w tej kwestii.
na zachowanie wpływają wyzwalacze, które nie są związane z marginesami

Jaka jest logika, według której element, który domyślnie jest overflow: auto, powinien zawierać inny materiał niż ten, w którym overflow jest ustawiony na auto.

Dlaczego wszystko oprócz domyślnego zachowania zwykłego div powinno zakładać że marża jest zawarta przez rodzica - i dlaczego zwykły default nie powinien zawierać marży?

EDIT: ostateczna odpowiedź jest taka, że W3C naprawdę określa to zachowanie, ale

the specs mix, without any word of explanation :
- 'wolne marginesy' (marginesy, które dotykałyby górnej lub dolnej części ich rodzica, nie są zawarte przez rodzica) i
- 'zwinięte marginesy' (sąsiadujące marginesy mogą się pokrywać).

Demo:

<!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>`

49

html css margin

Author: SamGoody, 2010-02-01

Source

1 answers

score 26 · Accepted Answer

Tak działa CSS zgodnie z W3C :

W tej specyfikacji wyrażenie zwijanie marginesów oznacza, że przylegające marginesy (bez niepustej zawartości, wypełnienia, obszarów granicznych lub odstępu) dwóch lub więcej pól (które mogą być obok siebie lub zagnieżdżone) łączą się w jeden margines.

Bardziej konkretny dla Twojego przypadku top div:

Jeśli górny i dolny margines pola przylegają do siebie, to możliwe jest dla marginesy, by się przez nie przewróciły. W tym przypadku pozycja elementu zależy od jego relacji z innymi elementami, których marginesy są załamywane.

Jeśli marginesy elementu są zwinięte z górnym marginesem rodzica, górna krawędź ramki jest zdefiniowana jako taka sama jak marginesu rodzica.

w przeciwnym razie rodzic elementu nie bierze udziału w zawalaniu marginesu, lub tylko dolny margines rodzica jest zaangażowany. Pozycja górna krawędź elementu jest taka sama, jak gdyby element miał niezerową dolną krawędź.

The best thing I can do is point you to on "zwijanie marginesów" na sitepoint (Autor: Tommy Olsson i Paul O ' Brien) . Robią bardzo szczegółowe wyjaśnienie z przykładami pokazującymi dokładnie zachowania, które demoed w kodzie przykładowym pytania.