Вміст блокового рівня

У CSS вміст, що бере участь у блоковому компонуванні, зветься вмістом блокового рівня.

При блоковому компонуванні рамки розкладаються одна після одної, вертикально, починаючи від верхнього краю контейнерного блока. Ліва зовнішня грань кожної рамки торкається лівого краю контейнерного блока.
Елемент блокового рівня завжди починається з нового рядка. При горизонтальному письмі, наприклад, в англійській мові або івриті, такий блок займає ввесь простір по горизонталі свого батьківського елемента (контейнера) та простір по вертикалі, рівний висоті його вмісту, таким чином утворюючи "блок".

[!NOTE] Поведінка блокового компонування, описана вище, змінюється, якщо writing-mode контейнерного блока має значення, відмінне від усталеного значення.

[!NOTE] Історично елементи HTML (HyperText Markup Language – мови розмітки гіпертексту) були категоризовані як елементи "блокового рівня" або "рядкові" елементи. Як характеристика представлення, це тепер визначається мовою CSS.

Приклади

У цьому прикладі два елементи абзаців (<p>) поміщені в <div>.

<div>
  <p>
    Це перший абзац. Колір фону цих абзаців був змінений, щоб відрізнити їх від
    їхнього батьківського елемента.
  </p>
  <p>Це другий абзац.</p>
</div>

Елементи абзаців (<p>) усталено є елементами блокового рівня. Саме тому вони відображаються у блоковому компонуванні:

p {
  background-color: #8abb55;
}

Дивіться також

• Споріднені терміни глосарія
  • Вміст рядкового рівня
• Контекст блокового форматування
• display
• writing-mode