Wyświetlanie elementów względem siebie

Dodajesz na stronę trzy akapity i trzy krótkie etykiety w znacznikach <span>. Akapity układają się jeden pod drugim, a etykiety stoją w jednym rzędzie - choć nie napisałeś ani linijki CSS. Skąd ta różnica? Odpowiedź kryje się we właściwości display, która decyduje, jak pudełko elementu układa się względem sąsiadów.

Elementy blokowe - jeden pod drugim

Spójrzmy na przykład. Oto trzy akapity zapisane w kodzie jeden za drugim, bez żadnych stylów:

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

Paragrafy wyświetlają się jeden pod drugim. Każdy zaczyna się w nowej linii i rozciąga na całą szerokość rodzica, nawet jeśli jego tekst zajmuje tylko kawałek. Tak działają elementy blokowe - jak kamienne bloki piramidy, z których każdy zajmuje całą warstwę.

Elementy liniowe - obok siebie

Spójrzmy na kolejny przypadek. Te same trzy linie, ale tym razem zapisane znacznikiem <span> zamiast <p>:

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

Wszystkie elementy będą wyświetlane obok siebie. Domyślnie paragraf jest elementem blokowym, a span jest elementem liniowym: zajmuje tylko tyle miejsca, ile potrzebuje jego treść, i płynie w linii tekstu jak hieroglif w wersie. Przejścia do nowej linii między spanami w kodzie zamieniły się w pojedyncze spacje - dlatego między etykietami widać odstęp.

Trzy najważniejsze wartości display

Wartości 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:

• 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ść.

Element liniowy ignoruje width i height. Wyjątkiem jest <img>, tzw. element zastępowany: mimo display: inline wymiary działają na nim normalnie. Każdą z tych wartości możesz jednak nadać dowolnemu elementowi. Zamieńmy spany w równe kafelki, które nadal stoją obok siebie:

span {
  display: inline-block;
  width: 100px;
  height: 80px;
}

Spany wciąż stoją w jednym rzędzie, ale teraz mają 100px szerokości i 80px wysokości - jak posągi ustawione w równym szeregu w świątyni. HTML się nie zmienił: span nadal jest spanem, zmieniło się tylko to, jak jego pudełko układa się na stronie.

display: none - element znika

Jest jeszcze jedna wartość, której będziesz używać bardzo często. Czasem chcesz, żeby element całkowicie zniknął ze strony, na przykład zwinięte menu:

.ukryty {
  display: none;
}

Element z tą klasą nie jest wyświetlany i nie zajmuje miejsca - sąsiedzi przesuwają się tak, jakby nie istniał w dokumencie. Jego kod nadal jest jednak w pliku HTML. Uważaj na podobne deklaracje: visibility: hidden i opacity: 0 też ukrywają element, ale zostawiają po nim puste miejsce. Element z display: none nie zajmuje miejsca wcale, inline i inline-block zajmują tyle, ile potrzebuje treść (inline-block może dostać własne wymiary), a block - całą szerokość rodzica.

Inne wartości display

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. Flexboxowi poświęcony jest cały następny moduł, a siatce CSS Grid - moduł o projekcie strony.

Moja rada: nie zmieniaj display na ślepo. Najpierw sprawdź w narzędziach deweloperskich, w zakładce Computed, jaką wartość element ma domyślnie.

Praktyka

W edytorze poniżej zobaczysz wszystkie trzy zachowania naraz: blokowe akapity, liniowe spany i kafelki inline-block. Spróbuj dodać spanom szerokość i sprawdź, czy cokolwiek się zmieni:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Display w CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Wyświetlanie elementów</h1>

    <h2>Elementy blokowe (block)</h2>
    <p class="block-el">Paragraf 1 - element blokowy</p>
    <p class="block-el">Paragraf 2 - element blokowy</p>
    <p class="block-el">Paragraf 3 - element blokowy</p>

    <h2>Elementy liniowe (inline)</h2>
    <span class="inline-el">Span 1</span>
    <span class="inline-el">Span 2</span>
    <span class="inline-el">Span 3</span>

    <h2>Inline-block</h2>
    <div class="inline-block-el">Box A</div>
    <div class="inline-block-el">Box B</div>
    <div class="inline-block-el">Box C</div>
</body>
</html>

Pamiętaj: block to kamienny blok zajmujący całą warstwę piramidy, inline to hieroglif płynący w wersie, a inline-block - posąg, który stoi w szeregu, ale ma własne wymiary.