Макет блочных и инлайновых элементов в нормальном потоке

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

В вертикальном режиме записи они выстраивались бы горизонтально.

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

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

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

p {
  border: 2px solid green;
}

Если мы установим отступы для элемента абзаца на 0 , то границы соприкоснутся.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

p {
  border: 2px solid green;
  margin: 0;
}

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

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

p {
  border: 2px solid green;
  width: 40%;
}

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

В примере ниже абзацы имеют верхний отступ 20px и нижний отступ 40px. Размер отступа между абзацами составляет 40px , поскольку меньший верхний отступ во втором абзаце схлопнулся с большим нижним отступом первого.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

p {
  border: 2px solid green;
  margin: 20px 0 40px 0;
}

Вы можете узнать больше о схлопывании отступов в нашей статье Освоение схлопывания отступов.

Инлайновые элементы отображаются один за другим в направлении, в котором пишутся предложения в конкретном режиме записи. Хотя мы не склонны думать об инлайновых элементах как о блоках, как и со всем в CSS, они таковыми являются. Эти инлайновые блоки выстраиваются один за другим. Если в содержащем блоке недостаточно места для всех блоков, блок может перейти на новую строку. Созданные строки известны как строковые блоки.

В следующем примере у нас есть три инлайновых блока, созданные абзацем с элементом <strong> внутри него.

<p>
  Before that night—<strong>a memorable night</strong>, as it was to
  prove—hundreds of millions of people had watched the rising smoke-wreaths of
  their fires without drawing any special inspiration from the fact.
</p>

Блоки вокруг слов перед элементом <strong> и после элемента </strong> называются анонимными блоками, блоками, добавленными для обеспечения того, что всё содержится в блоке, но которыми мы не можем напрямую управлять.

Размер строкового блока в направлении блока (то есть высота при работе в английском языке) определяется самым высоким блоком внутри него. В следующем примере элемент <strong> имеет высоту 300%; так как это содержимое занимает две строки, оно теперь определяет высоту строковых блоков этих двух строк.

<p>
  Before that night—<strong>a memorable night</strong>, as it was to
  prove—hundreds of millions of people had watched the rising smoke-wreaths of
  their fires without drawing any special inspiration from the fact.
</p>

strong {
  font-size: 300%;
}

Узнайте больше о поведении блочных и инлайновых блоков в нашем руководстве по Визуальной модели форматирования.

Помимо правил, существующих в CSS2.1, новые уровни CSS описывают поведение блочных и инлайновых блоков. Свойство display определяет, как ведут себя блок и любые блоки внутри него. В модели отображения CSS уровня 3 мы можем узнать больше о том, как свойство display изменяет поведение блоков и блоков, которые они генерируют.

Тип отображения элемента определяет внешний тип отображения; это диктует, как блок отображается рядом с другими элементами в том же контексте форматирования. Он также определяет внутренний тип отображения, который диктует, как блоки внутри этого элемента ведут себя. Мы можем очень наглядно увидеть это, рассматривая гибкую компоновку. В примере ниже у меня есть <div>, которому я присвоил display: flex. Контейнер с гибкой компоновкой ведет себя как блочный элемент: он отображается на новой строке и занимает все доступное пространство в направлении в строку. Это внешний тип отображения block.

Однако элементы с гибкой компоновкой участвуют в контексте форматирования гибкой компоновки, потому что их родительский элемент имеет display: flex, который имеет внутренний тип отображения flex, устанавливая контекст форматирования гибкой компоновки для непосредственных дочерних элементов.

<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
  <div>
    <div>Children</div>
    <div>are in</div>
    <div>normal flow</div>
  </div>
</div>

.container {
  display: flex;
}

.container > * {
  border: 1px solid green;
}

Таким образом, вы можете представить себе, что каждый блок в CSS работает таким образом. Сам блок имеет внешний тип отображения, поэтому он знает, как вести себя рядом с другими блоками. Затем у него есть внутренний тип отображения, который изменяет поведение его дочерних элементов. Эти дочерние элементы также имеют внешний и внутренний тип отображения. Элементы с гибкой компоновкой в предыдущем примере становятся блоками уровня гибкой компоновки, поэтому их внешний тип отображения определяется тем, что они являются частью контекста форматирования гибкой компоновки. Однако их внутренний тип отображения — поток, что означает, что их дочерние элементы участвуют в обычном потоке. Элементы, вложенные внутри нашего элемента с гибкой компоновкой, выстраиваются как блочные и инлайновые элементы, если только что-то не изменит их тип отображения.

Это понятие внешнего и внутреннего типа отображения важно, так как оно показывает, что контейнер, использующий метод компоновки, такой как flexbox (display: flex) и сетку (display: grid), по-прежнему участвует в блочной и инлайновой компоновке, поскольку внешний тип отображения этих методов равен block.

Браузеры отображают элементы в блочном или инлайновом контекстах форматирования, основываясь на том, что обычно имеет смысл для данного элемента. Например, элемент <strong> используется для выделения фрагмента текста и по умолчанию отображается в браузере жирным шрифтом. Обычно не имеет смысла отображать этот <strong> элемент как блочный элемент, разбивая его на новую строку. Если вам нужно, чтобы все <strong> элементы отображались как блочные, вы можете сделать это, задав strong { display: block; }. Возможность стилизовать контент с помощью CSS означает, что вы всегда можете использовать наиболее подходящие семантические HTML-элементы для разметки контента, а затем изменять способ их отображения с помощью CSS.

<p>
  Before that night—<strong>a memorable night</strong>, as it was to
  prove—hundreds of millions of people had watched the rising smoke-wreaths of
  their fires without drawing any special inspiration from the fact.
</p>

strong {
  display: block;
}

В этом руководстве мы рассмотрели, как элементы отображаются в обычном потоке, как блочные и инлайновые элементы. Благодаря этому поведению по умолчанию HTML-документ без стилей CSS будет отображаться в читаемом виде. Понимание работы обычного потока упростит компоновку, поскольку вы поймёте начальную точку для внесения изменений в способ отображения элементов.

• Базовая модель блоков CSS
• Обычный поток - Изучение компоновки
• Элементы инлайнового уровня
• Элементы блочного уровня