Wyświetlanie elementów względem siebie

Spójrzmy na przykład:

1<p>Paragraf 1</p>
2<p>Paragraf 2</p>
3<p>Paragraf 3</p>

Paragrafy wyświetlają się jeden pod drugim w sposób przedstawiony na poniższej ilustracji:

Spójrzmy na kolejny przypadek:

1<span>Span 1</span>
2<span>Span 2</span>
3<span>Span 3</span>

Wszystkie elementy będą wyświetlane obok siebie. Domyślnie, paragraf jest elementem blokowym, a span jest elementem liniowym.

Właściwości display, takie jak wyświetlanie liniowe, blokowe i inne, są kluczowymi elementami CSS, które opisują sposób, w jaki elementy HTML są prezentowane na stronie. Oto opis trzech popularnych wartości właściwości display:

• inline: Elementy o właściwości display ustawionej na inline nie zaczynają się od nowej linii i zajmują tylko tyle miejsca, ile potrzebują. Przykłady elementów liniowych to <span>, <a> i <img>.

• block: Elementy o właściwości display ustawionej na block zaczynają się od nowej linii i zajmują całą dostępną szerokość kontenera. Przykłady elementów blokowych to <div>, <p> i <h1>.

• inline-block: Element zachowuje się jak element liniowy, ale można na nim zastosować właściwości elementów blokowych, takie jak szerokość i wysokość.

Dodatkowo, istnieją również inne wartości właściwości display, takie jak flex, grid i table. Element o wartości display ustawionej na flex staje się kontenerem flexbox, co umożliwia zaawansowane układanie i zarządzanie jego potomkami. Natomiast element o wartości display ustawionej na grid staje się kontenerem siatki CSS, co pozwala na tworzenie bardziej skomplikowanych i responsywnych układów strony. Jeśli natomiast element ma wartość display ustawioną na table, zachowuje się jak element tabeli HTML, umożliwiając formatowanie i układanie danych w strukturze tabeli.