display

Блочная модель

Вам еще не надоели дефолтные установки браузера,

когда элементы ведут себя заранее предписанным образом ?

---

Атрибут display

Вот где начинается самое интересное

С помощью этого атрибута можно не только изменить дефолтные настройки отображения элемента,

например, сделать заголовок h1 строчным элементом

inline

css

.inline {
    display: inline;
}

html

<div>
   Hello, <h1 class="inline">World</h1>
</div>

но и заставить элементы вести себя совершенно несвойственным для них образом,

например, заставить div вести себя как таблица или ячейка таблицы

table

css

:root {
    --body-paddings: 10vh 10vw;
}
body {
    margin: 0;
    padding: var(--body-paddings);
    font-family: monospace, Arial;
    font-size:20px;
}

.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 300px;
    height: 80px;
    min-width: max-content;
    border: solid 1px gray;
}

@media screen and ( max-width: 400px ) {
    :root {
        --body-paddings: 1vh 1vw;
    }
}

html

<section class="table">
    <div class="table-row">
        <div class="table-cell">1</div>
        <div class="table-cell">2</div>
        <div class="table-cell">3</div>
    </div>
    <div class="table-row">
        <div class="table-cell">4</div>
        <div class="table-cell">5</div>
        <div class="table-cell">6</div>
    </div>
</section>

---

Есть еще одно интересное значение свойства display

contents

CSS

:root {
    --body-paddings: 5vh 5vw;
}
body {
    margin: 0;
    padding: var(--body-paddings);
    font-family: monospace;
    font-size:18px;
}

.inline {
    display: inline;
}

.contents {
    color: #907;
    display: contents;
}

.table {
    display: table;
}
.table-row {
    display: table-row;
    color: #079;
}
.table-cell {
    display: table-cell;
    padding: 10px 20px;
    text-align: justify;
    vertical-align: middle;
    width: 33vw;
    border: inset 1px;
}

@media screen and ( max-width: 600px ) {
    :root {
        --body-paddings: 1vh 1vw;
    }
    .table-row {
        display: contents;
    }
    .table-cell {
        display: block;
        min-width: 85vw;
        border: 0;
    }
}

html

<section class="table">
    <div class="table-row">
        <div class="table-cell">
            CSS-attribute <h1 class="contents">display</h1>
        </div>
        <div class="table-cell">значение</div>
        <div class="table-cell">
            <h3 class="contents">contents</h3>
        </div>
    </div>
    <div class="table-row">
        <div class="table-cell">
            Сам элемент не создает никаких блоков, но его потомки и 
            псевдоэлементы могут создавать блоки как обычно
        </div>
        <div class="table-cell">
            Элемент следует рассматривать так, как будто в дереве документа 
            его подменили его потомками и псевдоэлементами
        </div>
        <div class="table-cell">
            потомки элемента с <h4 class="contents">display:contents</h4> 
            превращаются в самостоятельные элементы
        </div>
    </div>
</section>

---

display	Описание
inline	строчный
block	блочный
inline-block	блочно-строчный
table	таблица
none	элемент не отображается, его место освобождается
...	...