display: block w CSS
Słownik kwalifikacji AUD.05 - Realizacja projektów graficznych i multimedialnych
display: block to deklaracja CSS określająca, że element ma być wyświetlany jako element blokowy.
Element blokowy:
- zaczyna się od nowej linii,
- domyślnie zajmuje całą dostępną szerokość kontenera,
- może mieć ustawianą szerokość, wysokość, marginesy i padding,
- układa się pionowo względem innych elementów blokowych.
Przykład
header, nav, article, footer {
display: block;
}
W tym przykładzie elementy header, nav, article i footer zostają wymuszone jako blokowe.
Zastosowanie przy HTML5
W HTML5 wiele znaczników semantycznych, np. header, nav, article czy footer, domyślnie jest traktowanych przez nowoczesne przeglądarki jako elementy blokowe.
Problem dotyczył starszych przeglądarek, które nie znały tych znaczników. Mogły one interpretować je niepoprawnie, co psuło układ strony. Dodanie display: block pomagało zachować właściwą prezentację.
Różnica względem elementów liniowych
Elementy liniowe, np. span lub a, nie zaczynają się od nowej linii i zajmują tylko tyle miejsca, ile potrzeba na treść. Elementy blokowe, np. div, p, header, tworzą osobne bloki układu strony.
Wniosek egzaminacyjny
Jeżeli w arkuszu pojawia się zapis header, nav, article, footer { display: block; }, chodzi o kompatybilność ze starszymi przeglądarkami, a nie o urządzenia mobilne ani formalne wymogi standardu CSS.