Почему маржа не будет содержаться родительским элементом? - PullRequest
Новая
       14

Почему маржа не будет содержаться родительским элементом?

49 голосов
/ 01 февраля 2010

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

Многие вещи заставят родителя обернуть поле ребенка:

  • границы: твердый;
  • позиция: абсолютная;
  • дисплей: встроенный блок;
  • переполнение: авто

(И это только из небольшого тестирования, несомненно, есть и другое.)

Я бы предположил, что это связано с сокращением полей, но:

  1. На странице спецификации W3C нет описания такого поведения.
  2. Здесь нет перекрывающихся полей.
  3. Поведение всех браузеров по этому вопросу одинаково.
  4. На поведение влияют триггеры, не связанные с полями

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

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

РЕДАКТИРОВАТЬ: окончательный ответ заключается в том, что W3C действительно определяет это поведение, но это

  • Спецификации не имеют никакого смысла.
  • Спецификации смешиваются, без всяких объяснений :
    • «свободные поля» (поля, которые могут касаться верхней или нижней части родительского элемента, не содержатся родителем) и
    • «Свернутые поля» (смежные поля могут перекрываться).

Демо-версия: 

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

1 Ответ

27 голосов
/ 01 февраля 2010

Так работает CSS в соответствии с W3C :

В данной спецификации выражение сужающиеся поля означает, что смежные поля (без непустого содержимого, отступов, границ или разделения, разделяющего их) двух или более блоков (которые могут быть рядом друг с другом или вложенными) объединяются. для формирования единого поля.

Более конкретно для вашего случая верхнего div:

Если верхнее и нижнее поля бокса соприкасаются, значит, поля могут разрушаться. В этом случае положение элемента зависит от его связи с другими элементами, поля которых свернуты.

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

Лучшее, что я могу сделать, это указать вам "Свертывание полей" в точке сайта (Томми Олссон и Пол О'Брайен) . Они делают очень подробное объяснение с примерами, показывающими вам именно то поведение, которое вы продемонстрировали в коде примера вопроса.

...