Свойство display - это ключевой инструмент в арсенале CSS, который буквально решает, как именно элемент будет себя вести и выглядеть на экране. По сути, оно позволяет переопределить стандартный способ отображения, если браузер «по умолчанию» предложил вам что-то не совсем то. Важно понимать базовый принцип: изначально в CSS все элементы считаются строчными (display:inline). Чтобы превратить их в блочные или изменить их поведение, браузеры опираются на встроенную таблицу стилей. Однако здесь кроется подводный камень: старые версии браузеров используют устаревшие таблицы, где просто нет правил для новых элементов из HTML5. Из-за этого такие теги, как section, header, nav, article, aside и footer, могут отображаться некорректно. Чтобы избежать неприятных сюрпризов, их блочность стоит задать вручную: style section, header, nav, article, aside, footer { display: block; } /style Не переживайте: такой код никак не навредит современным браузерам, но станет надежной страховкой для старых версий. Это простой способ обеспечить стабильность. | Значение по умолчанию: | inline | | Наследуется: | нет | | Версия: | CSS1 | | Синтаксис JavaScript: | object.style.display="inline" | | Значение | Описание | | none | Элемент полностью исчезает из потока: его не видно, и место под него на странице не резервируется. Остальные элементы ведут себя так, будто этого элемента нет вовсе. | | block | Элемент становится блочным: он занимает всю доступную ширину и вынуждает другие элементы переноситься на новую строку. Это открывает доступ ко всем свойствам, предназначенным для блоков. | | inline | Элемент отображается как строчный. Например, если вы примените это значение к содержимому блочных элементов, текст продолжится сразу после предыдущего элемента без переноса строки. | | inline-block | Идеальный компромисс: элемент остается в строчном потоке, но при этом к нему можно применять свойства блочных элементов, такие как margin и padding. | | list-item | Элемент превращается в блочный элемент списка, автоматически получая маркер перед своим содержимым. | | table | Элемент начинает вести себя как таблица. | | table-caption | Отображает элемент в роли заголовка таблицы. | | table-cell | Превращает элемент в ячейку таблицы. | | table-column | Назначает элемент колонкой таблицы. | | table-column-group | Указывает, что элемент является группой колонок (аналогично <colgroup>). | | table-footer-group | Отображает элемент как нижнюю часть таблицы. | | table-header-group | Отображает элемент как заголовочную часть таблицы. | | table-row | Элемент становится строкой таблицы. | | table-row-group | Отображает элемент как группу из нескольких строк. | | inherit | Значение наследуется от родительского элемента, что упрощает управление стилями в иерархии. Пример
|