Sposób wyświetlania elementów

Aby zdefiniować sposób wyświetlania elementu, należy wpisać w definicji stylu display: wartość.

Polecenie display reguluje sposób wyświetlania elementów, tworząc z nich, na żądanie autora strony, elementy blokowe, liniowe czy punkty wykazu, a więc modyfikując ich naturalne własności - przykładowo, akapit jako element z natury blokowy może zostać zmieniony na element liniowy, a grafika, jako element z natury liniowy, na element blokowy.

Lista wartości, jak widać w tabeli, jest bardzo obszerna, ale interpretacja w przeglądarkach jest na razie ograniczona do najważniejszych poleceń.

Kilka praktycznych przykładów:

Dwa akapity mogą być ustawione w jednym wierszu, gdy obu nadamy wartość inline. Normalnie nie jest możliwe, gdyż akapit jest blokiem rezerwującym dla siebie odrębny pojemnik.

<p style="display:inline"><strong>Akapit pierwszy </strong></p>
<p style="display:inline"><em>Akapit drugi</em></p>

Podobnie, w jednym rzędzie możemy ustawić dwie tabele, dodając w nich parametr display:inline (Firefox i Opera realizują to z błędami).

Element nie będący z natury blokiem, jak obrazek, możemy oznaczyć jako blok, wskutek czego nie będzie sąsiadował poziomo z innym elementem.

Przykład dwóch obrazków bez podania display:block

Przykład oznaczenia obrazka jako bloku.

<img src="pcq.gif" width="80" height="114" alt="" style="display:block">

Polecenie display:none powoduje niewyświetlanie elementu, chociaż w źródle dokumentu w dalszym ciągu istnieje.

Tutaj ma się pojawić obrazek, ale display:none usuwa go z ekranu i nie rezerwuje nawet dla niego pustego miejsca (por. z widzialnością elementów), choć element dalej widnieje w kodzie źródłowym strony.

<img src="pcq.gif" width="80" height="114" alt="" style="display:none">

Polecenie display:list-item powoduje oznaczenie elementu punktorem, jak gdyby był częścią wykazu (listy) nienumerowanego.

<p style="display:list-item">tekst akapitu</p>

Polecenie display:run-in powoduje, że element określony jako run-in jest wyświetlany jako element liniowy, jeśli następujący po nim obiekt jest blokiem (jak np. akapit). W przeciwnym razie staje się obiektem blokowym. Dzięki temu można np. wyświetlić w wierszu śródtytuł, a zaraz obok niego, w tym samym wierszu, akapit (a pamiętajmy, że oba elementy są z natury blokowe). Polecenie interpretuje Opera.

I efekt:

Polecenie display:inline-block powoduje, że element jest wyświetlany jako liniowy, choć sam ma w środku charakter elementu blokowego (można mu nadać np. odstęp i obramowanie), np. w środku bloku div można wyświetlić śródtytuł otoczony w tym samym wierszu, z lewej i prawej strony tekstem. Polecenie interpretuje Opera.

I efekt: