Почему мои поля рушатся, хотя у меня есть границы вокруг всего? - PullRequest
Новая
       37

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

0 голосов
/ 18 марта 2011

Вот код: 

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

По сути, это зеленое поле, внутри которого находится красное поле и синее поле.

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

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

Ответы [ 2 ]

2 голосов
/ 18 марта 2011

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

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

Вы можете прочитать о сокращающихся полях здесь: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

2 голосов
/ 18 марта 2011

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

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

<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, внутри которого он находится. Когда границы нет, поле проходит через край и сворачивается в поле вокруг красного делителя.

Ваши два поля соприкасаются друг с другом без границы между ними - поэтому они разрушаются.

...