Основные типы отображения

Главные типы: inline, block, none.

Примеры кода:

h1 {
    display: inline;
    font-size: 2em;
}

#header p {
    display: inline;
    font-size: 0.9em;
    padding-left: 2em;
}

#navigation, #seeAlso, #comments, #standards {
    display: none;
}

Использование inline позволяет элементам следовать потоку строки. block добавляет разрыв строки перед и после элемента. none полностью скрывает элемент.

Различие display: none и visibility: hidden

display: none удаляет элемент из потока документа, тогда как visibility: hidden скрывает элемент, но оставляет занимаемое им пространство.

Табличные значения display

Использование display в контексте таблиц:

table — основная таблица
table-row — строка
table-cell — ячейка
table-column, table-row-group, table-column-group, table-header-group, table-footer-group, table-caption
inline-table — таблица без разрывов строк сверху и снизу

Другие типы отображения

list-item — как элемент li в списке
run-in — зависит от отображения родителя (не поддерживается IE и Mozilla)
compact — встроенный или блочный, зависит от контекста
marker — используется с псевдоэлементами :before и :after

← Относительное позиционирование | Z-index →