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

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

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

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

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

Display Block

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

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

Изменение типа отображения элемента только изменяет поведение отображения элемента, а НЕ тип элемента. Например, в строчном элементе со свойством 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;
}

Значение none для свойства display не создает невидимое поле — оно вообще не создает поля. О том, как визуально убрать элемент, но создать поле в разделе css-visibility.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.