Black Baron

При создании веб-страниц важно понимать, как именно элементы располагаются на странице и как они взаимодействуют друг с другом. Даже без сложных инструментов вроде Flexbox или Grid, базовое поведение элементов уже определяется их типом отображения. В CSS за это отвечает свойство display. Именно оно определяет, будет ли элемент занимать всю строку, располагаться рядом с другими элементами или вести себя особым образом. В данной статье рассмотрим свойство display, а также разберём различия между блочными (block) и строчными (inline) элементами.

Свойство display

Свойство display определяет способ отображения HTML-элемента на странице. Оно влияет на:

• поведение элемента в потоке документа;
• возможность задания размеров;
• перенос элементов на новую строку;
• взаимодействие с соседними элементами.

Простейший пример:

div {

    display: block;

}

С помощью этого свойства можно изменить стандартное поведение элемента.

Блочные элементы (block)

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

Основные особенности:

• занимают всю ширину по умолчанию;
• каждый элемент начинается с новой строки;
• можно задавать ширину (width), высоту (height), отступы (margin, padding).

Примеры блочных элементов: <div>, <p>, <h1>–<h6>.

Пример:

.block {

    display: block;

    width: 300px;

    margin: 10px 0;

    background-color: #e0e0e0;

}

<div class="block">Первый блок</div>

<div class="block">Второй блок</div>

Элементы будут располагаться друг под другом.

Строчные элементы (inline)

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

Основные особенности:

• не начинают новую строку;
• ширина зависит от содержимого;
• нельзя задать width и height;
• вертикальные отступы работают ограниченно.

Примеры строчных элементов: <span>, <a>, <strong>.

Пример:

.inline {

    display: inline;

    color: #0066cc;

}

<span class="inline">Текст 1</span>

<span class="inline">Текст 2</span>

Оба элемента будут находиться в одной строке.

Сравнение block и inline

Значение inline-block

Существует промежуточный вариант — inline-block. Он сочетает свойства двух предыдущих типов.

Особенности:

• элементы располагаются в строке;
• можно задавать ширину и высоту;
• поддерживаются отступы.

Пример:

.inline-block {

    display: inline-block;

    width: 150px;

    height: 100px;

    margin: 5px;

    background-color: #cce5ff;

}

<div class="inline-block">Блок 1</div>

<div class="inline-block">Блок 2</div>

Элементы будут стоять в одной строке, но при этом сохранят размеры.

Управление отображением элементов

С помощью display можно изменять поведение элементов:

a {

    display: block;

}

Теперь ссылки будут вести себя как блочные элементы.

Также можно скрыть элемент:

.hidden {

    display: none;

}

Элемент полностью исчезнет со страницы и не будет занимать место.

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