Властивість Display

Русский перевод: Свойство Display

Найбільший трюк в обробці HTML-елементів – це розуміння того, що немає нічого особливого в тому, як більшість із них працюють. У більшості випадків сторінки можуть бути створені за допомогою кількох тегів, до яких застосовано стиль відповідно до особистих переваг. Стандартне подання браузером більшості HTML-елементів включає стилі шрифту, відступи, поля і, головним чином, типи відображення (display).

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

Головними типами відображення є inline (вбудований), none (не показувати) і block (блок). Ви можете застосовувати їх, використовуючи значення властивості display: inline, block та none.

Inline

Елементи, представлені як inline, слідують потоку рядка. Наприклад, <strong>, <em>, <a>.

Block

Елементи block розташовуються з розривом рядка зверху і знизу. Наприклад, <p>, <h1> та інші заголовки.

None

Властивість display: none повністю приховує елемент і видаляє його з потоку документа.

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

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

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

Примітка: display: none і visibility: hidden різняться. Перший видаляє елемент повністю, другий – ховає елемент, залишаючи місце в макеті.

Таблиці

Для HTML-таблиць властивості display можуть мати значення table, table-row, table-cell тощо. Це дозволяє створювати CSS-таблиці без використання HTML-таблиць, але доступність сайту може постраждати.

Інші типи відображення

list-item – імітує елемент <li>
run-in – inline або block залежно від контексту (не підтримується IE та деякими браузерами Mozilla)
compact – inline або block залежно від контексту
marker – використовується для псевдоелементів :before та :after

← ПсевдоелементиZ-index