Руководство по свойству display в CSS

Спецификация CSS определяет значение отображения по умолчанию для всех элементов. Например, элемент <div> по умолчанию рендерится как блочный элемент, а элемент <span> как строчный.

Изменение значения display по умолчанию

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

Теперь рассмотрим наиболее часто используемые значения display.

Display Block

Значение block свойства display заставляет элемент вести себя как блочный элемент, например, как элемент <div> или <p>. Правила в следующем примере переопределяют элементы <span> и <a> как блочные:

span {
    display: block;
}
a {
    display: block;
}

Display Inline

Значение inline свойства display приводит к тому, что элемент ведет себя так, как если бы он был строчным элементом, например элементом <span> или <a>. Правила в следующем примере переопределяют элементы <p> и <li> как строчные:

p {
    display: inline;
}
ul li {
    display: inline;
}

Display Inline-Block

Значение inline-block свойства display заставляет элемент генерировать блочный элемент. Соседние элементы имеющие это же свойство будут отображаться в одной строке. Следующие правила отображают элементы <div> и <span> в виде встроенного блока:

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Display None

Значение none просто приводит к тому, что элемент вообще не генерирует никаких блоков. Дочерние элементы также не генерируют никаких блоков, даже если их свойство display установлено в отличное от none. Документ отображается так, как если бы элемент не существовал в дереве документа.

h1 {
    display: none;
}
p {
    display: none;
}