Спецификация 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.

Похожие посты

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

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

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

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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