Свойство display

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

display: block;
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Значения

display: значение;

Значения, которые задают тип элементу и влияют на поток элемента в документа: block, inline

Значения, которые определяют как будут располагаться дочерние элементы блока: table, flex, grid

Значения, которые задают тип элемента и работают только если являются дочерними элементами с определенным типом: table-row-group, table-header-group, table-footer-group, table-column-group, table-column, table-caption, table-cell, table-row

Другие значения: inline-block, inline-flex, inline-grid, list-item

display: none;

Элемент скрыт со страницы, как если бы его не было в HTML

<style>
.example-1 {
    display: none;
}
</style>

<div class="example-1">Меня нет</div>
Меня нет
display: block;

Блочный тип элемента. Каждый элемент начинается с новой строки и занимает 100% ширины по умолчанию. Блочные элементы по умолчанию: div, section, nav, header, footer, main, aside, article, p

<style>
.example-2 {
    display: block;
    margin-bottom: 2px;
    padding: 5px;
    background-color: #e13737;
    color: #fff;
}
</style>

<a class="example-2" href="#">Блочная ссылка</a>
<a class="example-2" href="#">Блочная ссылка</a>
Блочная ссылка Блочная ссылка
display: inline;

Строчный тип элемента. Элементы будут идти в одну строку, пока позволяет свободное место, после чего будут перенесены на новую строку. Строчные элементы по умолчанию: b, strong, i, em, u, a, span, mark, del, ins, s, small

<style>
.example-3 {
    display: inline;
    background-color: #e13737;
}
</style>

<div class="example-3">Lipsum dolor</div>
<div class="example-3">Lipsum dolor</div>
Lipsum dolor
Lipsum dolor
display: inline-block;

Гибридный тип элемента, который в потоке ведет себя как строчный, но может принимать CSS свойства для блочных элементов (width, height и тд.)

<style>
.example-4 {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px;
    background-color: #e13737;
}
</style>

<div class="example-4"></div>
<div class="example-4"></div>
display: table;

Элемент ведет себя как таблица (table), а его прямые потомки ведут себя как строки таблицы, но для корректной работы нужно установить им значение display: table-row, а ячейкам display: table-cell

<style>
.example-5 {
    display: table;
    border-collapse: collapse;
    width: 100%;
    background-color: #e5e5e5;
}
.example-5-row {
    display: table-row;   
}
.example-5-cell {
    display: table-cell;   
    padding: 5px;
    border: 1px solid #ccc;
}
</style>

<div class="example-5">
    <div class="example-5-row">
        <div class="example-5-cell">1</div>
        <div class="example-5-cell">2</div>
    </div>
    <div class="example-5-row">
        <div class="example-5-cell">1</div>
        <div class="example-5-cell">2</div>
    </div>
</div>
1
2
1
2
display: flex;

Элемент становится flexbox контейнером, а его прямые потомки - элементами flexbox контейнера

<style>
.example-6 {
    display: flex;
    justify-content: space-between;
    outline: 2px dashed #ccc;
}
.example-6-item {
    padding: 5px;
    background: #52c32d;
}
</style>

<div class="example-6">
    <div class="example-6-item">1</div>
    <div class="example-6-item">2</div>
</div>
1
2

Читайте также

Обсуждение (2)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии


Данил
Не хватает пояснения свойству display со значением grid!
  • AchivMen
    Как и у видео на ютубе, значения этих самих атрибутов