Układ treści na stronach internetowych – właściwość display

Na przestrzeni kilku lat odnosiłem wielokrotnie wrażenie, że wielu początkujących web developerów, czy część osób pracujących już w zawodzie, nie w pełni świadomie posługuje się arkuszami stylów (cascading style sheets), nawet w jego podstawowym zakresie funkcjonalności – czyli przy układaniu elementów na stronie. Wynika to pewnie z tego, że jest to technologia w dużym stopniu marginalizowana, a pisanie czegokolwiek w CSS traktowane jest często jako przykry dodatkowy obowiązek.
Zmieńmy to dziś i przyjrzyjmy się fundamentalnym mechanizmom układania treści na stronie lub w aplikacji webowej.

---

Model pudełkowy (box model)

Układ elementów na stronach internetowych opiera się na koncepcji boxów, według tzw. modelu pudełkowego (box model). Polega on na tym, że każdy z elementów HTML traktowany jest jako prostokąt pewnych wymiarów, a właściwie jako prostokąt oraz kilka jego obramowań:

• content – sama zawartość elementu
• padding – odstęp wewnętrzny, między zawartością a obramowaniem
• border – grubość obramowania
• margin – odstęp zewnętrzny, między elementem a jego sąsiadami

Wymiary te doskonale obrazuje podgląd w konsoli deweloperskiej, w tym przypadku akurat Chrome:

---

Normalny przepływ strony (normal flow)

Normalny przepływ strony (normal flow) polega na układaniu elementów w liniach jeden obok drugiego (horyzontalnie), a z kolei linie jedna pod drugą (wertykalnie). W obu przypadkach decyduje o tym kolejność zdefiniowana w strukturze HTML. Elementy mogą poddawać się układaniu w ramach linii, tworzyć samodzielnie własne linie, czy też zawierać w sobie inne elementy.

Jak dokładnie te pudełka zostaną rozmieszczone względem siebie – o to zadba property display w arkuszu CSS, który może przybrać jedną z kilkunastu wartości, przy czym najważniejsze z nich to:

• inline (domyślny*) – box wyświetla się w ramach obecnej linii, nie posiada rozmiaru
• block – box tworzy nową linię, posiada rozmiar
• inline-block – hybryda wyżej wymienionych, wyświetla się w ramach obecnej linii, ale może posiadać rozmiar
• flex – tworzy nowy kontener dla układu typu flex
• inline-flex – odmiana liniowa (inline) kontenera układu flex, analogicznie do inline-block
• grid – tworzy nowy kontener dla układu typu grid
• inline-grid – analogicznie
• none – element zostanie ukryty (zupełnie wycięty ze struktury strony)

*W standardzie CSS inline to domyślna wartość każdego elementu, natomiast każda przeglądarka posiada swój domyślny arkusz stylów (user agent stylesheet), dzięki którym pewne elementy na starcie posiadają inne wartości właściwości display, wygląda to mniej więcej tak:

• block – paragrafy (<p>), listy (<ul>, <ol>), tytuły (<h1> …, <h6>) oraz elementy, które służą typowo jako kontenery dla innych elementów, czyli <div>, <section>, <header> itp.
• inline – typowe liniowe elementy to <img>, <em>, <span> itp.

Mniej ważne i stosowane w specyficznych sytuacjach:

• grupa table-* (table/inline-table/table-caption/table-cell/table-column/…) – zgrupowałem je, ponieważ wszystkie mają to samo zadanie – wyświetlać się tak jak odpowiadający im element HTML (<table>, <caption>, <tr>, <td> itp.)
• list-item
• run-in
• contents
• flow-root

Nie każdy element należy jednak do normalnego przepływu strony, w CSS istnieje kilka dodatkowych mechanizmów.
Ich przykładem mogą być elementy z właściwością opływania (float) lub elementy z pozycjonowane w sposób absolutny (absolute positioning).
Więcej o pozycjonowaniu (w tym absolutnym) napisałem [tutaj].

---

Właściwość display a ułożenie elementu

Element blokowy – display: block

Block to obok inline najważniejszy i najczęściej używany tryb wyświetlania elementu.
Elementy typu block tworzą pudełka, które mają określony rozmiar i układają się wertykalnie, czyli jeden pod drugim w kolejności pojawiania się w strukturze HTML.
Tworzą w pewnym sensie własne linie, wewnątrz których mogą wyświetlać się elementy inline, ale także inne elementy blokowe.
Domyślnie element zajmuje 100% dostępnej szerokości, natomiast wysokością dopasowuje się do swojej zawartości, możemy jednak tymi wymiarami dowolnie manipulować.
Uwzględnia też wszystkie zadeklarowane marginesy.

Element liniowy – display: inline

Domyślny i obok block najpowszechniejszy typ wyświetlania elementu.
Układają się one horyzontalnie, jeden obok drugiego, według kolejności zadeklarowanej w HTML. Ich typowym przeznaczeniem jest ostylowanie fragmentu tekstu, tak aby jednak pozostał nadal na swoim miejscu.
Również tworzą pudełka, jednak poddane są one pewnym ograniczeniom, przez to że wyświetlane są w ramach jednej linii, nie tworząc własnej. Przykładowo, uwzględnia marginesy i paddingi, ale tylko boczne (left i right) rozpychają pozostałe elementy w linii. Wartości top i bottom paddingów również zostają uwzględnione, ale nie są wstanie przemieścić sąsiadujących elementów, a top i bottom marginesów zostają całkowicie zignorowane.

Szerokością i wysokością dopasowują się do swojej zawartości i nie możemy tymi wartościami manipulować poprzez właściwości width i height.
Ograniczeń tych jest więcej, czyniąc je mniej elastycznymi elementami niż blokowe.

Co ważne, można w tym trybie sterować wertykalnym rozmieszczeniem zawartości względem linii bazowej tekstu, poprzez właściwość vertical-align:

Element liniowo-blokowy – display: inline-block

Jak nazwa wskazuje, jest to hybryda trybów block i inline.
Można wyobrazić to sobie jako block, który nie tworzy własnej nowej linii i układa się jeden obok drugiego.
Alternatywnie – jako element inline, któremu można nadać szerokość i wysokość oraz dowolny margines, pozbywając się największych ograniczeń zwykłego trybu inline. Nadając mu rozmiar, rozpychamy sąsiadujące elementy we wszystkie strony.

Jego wnętrze zachowuje się jak block, co znaczy że może zawierać w sobie inne elementy.

Element niewyświetlany – display: none

Ustawiając właściwość display na none, usuwamy całkowicie element z normalnego przepływu, przez co przestaje w jakikolwiek sposób oddziaływać na sąsiadujące elementy.
Wszystkie dzieci tego elementu również przestają być wyświetlane i nie mogą same tej właściwości nadpisać.

Tym właśnie różni się od pozornie podobnego ustawienia visibility: hidden, które tylko wyłącza wyświetlanie się elementu, zajmuje on jednak dalej swoją pozycję w przepływie strony:

Kontener dla modelu elastycznego – display: flex/inline-flex

Jest to wciąż stosunkowa nowość w świecie CSS i temat jest na tyle obszerny, że stanowi materiał na kolejny artykuł 🙂

Kontener dla modelu siatki – display: grid/inline-grid

Tu również znajdzie się kolejny artykuł.

---

Elementy istniejące poza przepływem strony

Element pływający – float: left/right

Pierwszy sposób na wyjęcie elementu z normalnego układu strony.
Element z tą właściwością przesuwany jest w ramach swojego kontenera w lewo lub w prawo względem swojej nominalnej pozycji. Przesuwanie następuje aż do krawędzi kontenera lub do innego elementu pływającego, możemy je więc układać obok siebie.
Taki element jest wyciągany z normalnego przepływu strony, jednak wciąż w przepływie uczestniczy, wpływając na pozostałe elementy. Różni się tym do pozycjonowania absolutnego.
Właściwość float przyjmuje wartość left lub right, przy czym początkowa wartość dla każdego elementu to none, opływanie jest więc domyślnie wyłączone.

Gdy element staje się pływający, reszta treści (sąsiadujące elementy) układa się obok niego, a przechodząc do następnej linii układa się pod nim, działa to tak jak opływanie obrazu w kolumnie tekstu:

Zachowanie to można zmodyfikować poprzez ustawienie właściwości clear (na left/right/both) dla sąsiadującego elementu – zmusimy go w ten sposób do przejścia do następnej linii:

Gdy element jest pływający, przestaje być traktowany jako liniowy (mimo tego, że zachowuje się podobnie – układa się w ramach istniejącej linii).
Wartość display modyfikowana jest wtedy następująco:
display: inline-block zamienia się w block, inline-table w table, inline-flex we flex i inline-grid w oczywiście grid.

Pozycjonowanie absolutne

Element zostaje wycięty z normalnego przepływu strony i przestaje oddziaływać na swoich sąsiadów ze struktury HTML, tak jakby go tam nie było.
Można to osiągnąć poprzez modyfikację właściwości position, ustawiając wartość absolute lub fixed.
Zostaje na swoim pierwotnym miejscu (unosząc się nad pozostałymi elementami), chyba że ustawimy jego pozycję względem kontenera odpowiednimi właściwościami, tj. top/bottom/right/left.

Więcej o właściwości position w [artykule, który niedługo się pojawi].