Коробки уровня блока заключены в линейные блоки? - PullRequest
Новая
       10

Коробки уровня блока заключены в линейные блоки?

0 голосов
/ 11 мая 2018

Есть ли где-нибудь в спецификации W3C, где указано, что блоки уровня блока автоматически окружаются линейными блоками ?

Фон

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

Цитата из W3C CSS 2.1, Глава 10 :

Хотя поля, границы и отступы для незаменяемых элементов не введите в строку box расчет, они по-прежнему отображаются вокруг встроенные коробки . Это означает, что если высота указана как line-height меньше, чем высота содержимого содержащихся ящиков, фонов и цвета отступов и границ могут «сливаться» в смежные линейные блоки .

Обратите внимание, как написано: «кровоточить в соседние линейные блоки ».

Я провел тестирование и заметил, что на самом деле он также перетекает в смежные блоки уровня блока . 

.one {
  border: 1px solid green;
}
.two {
  border: 1px solid red;
}
.three {
  line-height: normal;
  border: 1px solid blue;
  padding: 10px 0;
}
  <div class="one">test</div>
  
  <span class="two">
    <span class="three">test two</span>
    x
  </span>

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

Спасибо.

1 Ответ

0 голосов
/ 12 мая 2018

На самом деле я не уверен, можно ли сказать, что блок уровня блока примыкает к линейному блоку (или наоборот). Однако, в вашем примере, на самом деле есть два строковых блока - один, который генерируется div.one при форматировании его встроенного содержимого путем установления контекста встроенного форматирования, и другой, который генерируется элементом body при форматировании span.two (и его span.three дочерний элемент) - и можно сказать, что линейный блок внутри div.one примыкает к тому, который содержит span.two и span.three.

Для рисования встроенных блоков не имеет значения, какой контейнер блока генерирует каждый линейный блок, который примыкает к тем, которые содержат эти встроенные блоки. Даже не имеет значения, устанавливает ли какой-либо из контейнерных блоков контекст форматирования блока. Вот почему вы видите, что встроенный блок span.three стекает в линейный блок внутри div.one.

Блок уровня блока не может напрямую сосуществовать с линейным блоком, и по определению «уровень блока» он также не может быть заключен в блок строки (чтобы ответить на ваш заголовок). В вашем примере линейный блок, на котором визуализируются span s, находится в анонимном блоке , который затем представляется как родственный элемент div. Этот анонимный блок-блок устанавливает собственный контекст встроенного форматирования для span s, так же как div делает для своего текста.

...