CSS display: свойство для управления отображением элементов

CSS свойство display определяет, как элемент будет отображаться на веб-странице.

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

display: block;

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

<div>
   Этот элемент будет отображаться как блок
</div>

<p>
   Этот параграф также будет отображаться как блок
</p>

<h1>
   Заголовок первого уровня будет также блочным элементом
</h1>

display: inline;

Это значение делает элемент строчным, что означает, что он будет отображаться внутри строки. Элементы с display: inline; не начинаются с новой строки и автоматически выравниваются рядом друг с другом. Ширина и высота таких элементов определяются содержимым. Некоторые примеры элементов с display: inline;:

<span>
   Этот элемент будет отображаться как строчный
</span>

<a href="#">Ссылка</a>

<strong>
   Это пример строчного элемента с жирным начертанием
</strong>

display: inline-block;

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

<input type="text" placeholder="Текстовое поле" style="display: inline-block;">

<button style="display: inline-block;">Кнопка</button>

<img src="image.jpg" alt="Изображение" style="display: inline-block;">

display: none;

Это значение скрывает элемент полностью, так что он не будет занимать место на странице. Он не будет отображаться, и пользователи не увидят его. Это полезно, когда нам нужно временно скрыть элементы или использовать JavaScript для показа/скрытия элементов. Некоторые примеры элементов с display: none;:

<div style="display: none;">
   Этот элемент не будет отображаться на странице
</div>

<p style="display: none;">
   Абзац с этим стилем также не будет виден
</p>

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