Почему мои поля уменьшаются, даже если у меня есть границы вокруг всего?

Вот код:

<html>

    <head>
        <title></title>

        <style type="text/css">

        * {border: 0px; padding: 0px;}

        #greenbox
        {
            margin: 20px;
            border: 5px solid green;

        }   

        #redbox
        {
            margin: 20px;
            border: 5px solid red;
        }

        #bluebox
        {
            border: 5px solid blue; 
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 20px;
                        margin-top: 20px; /*COLLAPSES - why??*/
        }

        </style>
    </head>
    <body>

        <div id="greenbox">

            <div id="redbox">

                red box
            </div>

            <div id="bluebox">

                    bluebox

            </div>

        </div>



    </body>
</html>

По сути, это зеленая коробка, которая содержит красный прямоугольник и синий прямоугольник внутри.

Почему вертикальное расстояние между красной рамкой и синей рамкой не составляет 40 пикселей?

Я понимаю, что нижнее поле красного поля и верхнее поле синего поля `` свернуто '', но я понял, что поля не сжимаются, если у вас есть граница или отступ (я пробовал и то, и другое - все еще тот же результат.


html css collapse border margin
person SteveX    schedule 18.03.2011    source источник
comment
Вы тестируете в каком-то конкретном браузере? Неужели у вас нет доктайпа?   -  person thirtydot    schedule 18.03.2011
comment
Откуда у вас понимание, что поля не обрушиваются, если у вас есть бордюр? Так бывает только в определенных ситуациях.   -  person Charles Boyung    schedule 18.03.2011

Ответы (2)


arrow_upward
2
arrow_downward

Поля не просачиваются сквозь границы. Они действительно рушатся друг через друга.

См. Этот пример:

<style>
body { background: black; }
.red { background: red; }
.blue { background: blue; }
.border { border: solid white 1px; }
div { margin: 20px; min-height: 30px; width: 50% }
</style>


<div class="red">
    <div class="blue">
    </div>
</div>

<div class="red border">
    <div class="blue border">
    </div>
</div>

Когда граница присутствует, поле наверху синего div отодвигает верх синего div от верха красного div, внутри которого он находится. Когда границы нет, поле проходит через край и превращается в поле вокруг красного блока div.

Два ваших поля соприкасаются друг с другом, но между ними нет границы, поэтому они схлопываются.

person Quentin    schedule 18.03.2011
comment
Я понимаю. Таким образом, поля всегда будут сворачиваться друг относительно друга, если между ними нет границы или отступа, либо и того, и другого. - person SteveX; 18.03.2011

arrow_upward
2
arrow_downward

Поля находятся за пределами рамки в блочной модели, поэтому границы не имеют ничего общего с краями, которые сжимаются.

Вы можете прочитать о модели коробки здесь: http://www.w3.org/TR/CSS21/box.html

Вы можете прочитать об уменьшении полей здесь: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

person Martin Jespersen    schedule 18.03.2011