Перейти к содержанию

Энциклопедия CSS: display: block

Материал из Викижурнал
Введение в CSS
Энциклопедия CSS: display: block
Энциклопедия CSS: display: block
Тематические порталы
Портал CSS • Портал Веб-разработчиков

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

Особенности поведения

  1. Занятие всей ширины контейнера: Элемент с display: block растягивается на всю ширину родительского элемента, даже если его содержимое этого не требует.
  2. Начало новой строки: Каждый блоковый элемент начинается с новой строки, и последующие элементы будут располагаться под ним (если они также блочные).
  3. Возможность установки размеров: Для блочных элементов можно задавать ширину (width), высоту (height), внутренние отступы (padding), внешние отступы (margin) и границы (border).

Примеры использования

HTML и CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример display: block</title>
    <style>
        .block-element {
            display: block;
            width: 50%;
            padding: 10px;
            margin: 10px auto;
            background-color: lightblue;
            border: 1px solid blue;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="block-element">Я блочный элемент</div>
    <div class="block-element">И я тоже</div>
</body>
</html>

Результат применения стиля

Test code at separate page.

Объяснение

  • Каждый элемент с классом block-element занимает 50% ширины своего родителя.
  • Элементы располагаются один под другим, так как это блочные элементы.

Примеры блочных элементов

В HTML по умолчанию следующие элементы являются блочными:

  • <div>
  • <p>
  • <h1>–<h6>
  • <ol>, <ul>, <li>
  • <section>, <article>, <aside>, <header>, <footer>
  • <form>

Сравнение с другими значениями display

Свойство Описание
inline Элемент занимает только столько места, сколько необходимо его содержимому.
inline-block Сочетает свойства блочного и строчного элементов: занимает место по содержимому, но поддерживает размеры.
none Элемент полностью исключается из отображения, не занимая места на странице.

Когда использовать display: block

  • Когда необходимо создать контейнер для содержимого, которое должно быть отделено от других элементов.
  • Для оформления крупных разделов текста или элементов, таких как параграфы, заголовки или разделы (<section>).
  • Если требуется задать ширину или высоту элементу, чтобы он выглядел как отдельный блок.

Совместимость с браузерами

Значение display: block поддерживается всеми современными браузерами и считается базовым свойством CSS. Это делает его универсальным для использования в веб-разработке.

Заключение

display: block — это основа для построения блочной структуры веб-страниц. Оно интуитивно понятно и обеспечивает гибкость в создании макетов. Несмотря на простоту, знание тонкостей использования этого значения поможет разработчикам избежать распространённых ошибок и грамотно организовать содержимое страниц.

Другие статьи о CSS

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=Энциклопедия_CSS:_display:_block&oldid=13126