Свойство display — это, пожалуй, одно из самых важных свойств в CSS.
Каждый элемент в HTML-документе рассматривается как поле, и именно свойство display определяет, как эти поля будут отображаться.
Существует большое количество значений, которые можно использовать с этим свойством. Однако только некоторые из них часто используются, на них мы и остановимся:
inline
inline-block
block
flexbox
grid
none
table
Inline
Значение inline является значением по умолчанию для каждого элемента в CSS.
display: inline;
Для наглядного представления inline можно представить себе абзац, содержащий несколько слов, выделенных жирным шрифтом или тегами.
Мы можем применить padding и margins к инлайн-элементам, однако окружающие элементы будут отодвинуты в горизонтальном направлении (не вертикальном). Кроме того, height
и width
игнорируются элементами inline
.
Каждый тег HTML отображается inline, если не указано иное, за некоторыми исключениями, такими как div
, p
и section
, которые задаются как block
.
Инлайн-блок
display: inline-block;
Элемент с inline-block
очень похож на inline
, однако width
и height
могут быть применены, как указано.
Блок
display: block;
Как уже упоминалось, ряд элементов по умолчанию имеет значение block
. Это элементы верстки, такие как <div>
, <section>
и <ul>
. Также текстовые элементы, такие как <p>
и <h1>
.
Элементы уровня блока укладываются друг за другом по вертикали. По умолчанию каждый элемент занимает 100% ширины страницы.
Если это указано, то значения, присвоенные параметрам width
и height
, а также margin
и padding
соблюдаются.
Flexbox
Свойство display
также используется при работе с flexbox:
display: flex;
Сетка
При использовании CSS Grid мы также устанавливаем свойство display:
display: grid;
Нет
display: none;
Мы используем display: none
, чтобы заставить элемент исчезнуть.
Он все еще загружен в наш HTML, просто не отображается в браузере.
Значения таблицы
display: table;
С появлением современных методов верстки, таких как flexbox & grid, HTML-элемент <table>
стал немного пережитком.
Тем не менее, при желании мы можем использовать ряд значений отображения, чтобы заставить не табличные элементы вести себя как табличные:
element {
display: table;
display: table-cell;
display: table-column;
display: table-row;
display: table-caption;
}
Мы можем использовать это следующим образом:
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
Cell content.
</div>
</div>
</div>
Это не самая распространенная техника, поскольку она создает беспорядочную разметку, однако она может быть использована в некоторых случаях.
Заключение
Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой! Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь
🌎 Давайте общаться
-
Портфолио
-
Twitter
-
LinkedIn
-
Hashnode
-
Devto
-
Medium
-
Github
-
Codepen