CSS Display

Свойство CSS Display нужен для установки типа html элемента относительно других элементов. Проще говоря это опция отвечает за то, как отображать элемент относительно других. Благодаря ему можно добиваться нужных "спецэффектов".

Синтаксис CSS Display

display: value; 

Где value может принимать значения:

• block - блочный элемент (автоматически создает перевод строки)
• inline - встроенный элемент (не создает перевода строки);
• inline-block - производная от inline. Он также не создает перевода строки, но элементу можно задать ширину и высоту;
• list-item - блочный элемент с маркером списка;
• run-in - устанавливает элемент как блочный или встроенный в зависимости от контекста;
• table - равносильно таблице (тег <table>), с переносом строки;
• inline-table - производная от table. Элемент является встроенным, но соседние элементы его обтекают;
• table-caption - создания заголовка таблицы (аналог тега <caption>);
• table-cell - создания элемента ячейки таблицы (аналог тега <td>);
• table-column - элемент определяющий столбец таблицы;
• table-row - элемент определяющий строку таблицы;
• none - элемент не отображается на странице и все другие элементы ведут себя так, как будто его нет вообще;
• inherit - наследование от элемента родителя;

Примечание
По умолчанию все элементы являются строчными display:inline

Примеры использования Display

Пример №1. Использование display:block

<p>Абзац №1. Рассматриваем элементы display.
<font style="display:block; border:1px solid #000">
текст со свойством display:block</font>
Как видите, строка перенеслась автоматически</p>

В примере добавлено свойство border:1px solid #000 чтобы показать, какую область занимает блочный элемент.

Вот как это выглядит на странице:

Пример №2. Использование display:none

<p>Абзац №1. Рассматриваем элементы display:none.
<font style="display:none;">
текст со свойством display:none</font>
Как видите, блок с текстом none отсутствует</p>

Вот как это выглядит на странице:

Логично провести ассоциацию с атрибутом visibility: hidden, но в отличии от него, display:none не отводит места под объекты.

Это свойство является очень полезным, например, при создании эффектов выпадающего меню.

Пример №3. Использование display:inline-block

<p>Абзац №1. Рассматриваем элементы.
<font style="display: inline-block; width: 150px; height: 50px; border: 1px solid #000">
текст со свойством display:inline-block</font>
Как видите, блок с текстом none отсутствует</p>

Вот как это выглядит на странице:

Читайте также:
• Свойство transform
• Свойство border
• Свойство background
• Свойство transition
• Свойство overflow
• Свойство box-shadow
• Медиа запросы (@)
• position absolute

← Перейти в каталог CSS уроков