Kurs HTML

Wprowadzenie: Jak element jest wyświetlany?

Właściwość display w CSS jest jedną z najważniejszych właściwości kontrolujących layout. Określa ona, jak element HTML jest traktowany w przepływie dokumentu i jak oddziałuje z innymi elementami. Decyduje o tym, czy element generuje "pudełko" blokowe czy liniowe, co wpływa na jego rozmiar, marginesy, padding i pozycję.

Każdy element HTML ma domyślną wartość display (np. <div> i <p> to block, a <span> i <a> to inline), ale możemy ją zmienić za pomocą CSS, aby dostosować układ strony.

W tej lekcji skupimy się na trzech podstawowych wartościach: block, inline i inline-block.

display: block;

Elementy z display: block; (elementy blokowe) charakteryzują się następującymi cechami:

• Zaczynają się w nowej linii: Zawsze powodują przełamanie linii przed i po sobie.
• Zajmują całą dostępną szerokość: Domyślnie rozciągają się na 100% szerokości swojego kontenera nadrzędnego (chyba że jawnie ustawiono im width).
• Respektują width i height: Można im jawnie ustawić szerokość i wysokość.
• Respektują marginesy i paddingi: Można im ustawiać marginesy (margin) i wypełnienia (padding) ze wszystkich czterech stron (góra, prawo, dół, lewo), które wpływają na otaczające elementy.
• Przykładami domyślnych elementów blokowych są: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <form>, <header>, <footer>, <section>, <article>.

div {
  display: block; /* Domyślne dla div */
  width: 300px;
  height: 100px;
  margin: 10px;
  padding: 15px;
  background-color: lightblue;
  border: 1px solid blue;
}

span.make-block {
  display: block; /* Zmienia span w element blokowy */
  margin-bottom: 10px;
  background-color: lightyellow;
}

display: inline;

Elementy z display: inline; (elementy liniowe lub śródliniowe) charakteryzują się następującymi cechami:

• Nie zaczynają się w nowej linii: Układają się w jednej linii z otaczającą treścią i innymi elementami inline, dopóki nie zabraknie miejsca (wtedy następuje zawinięcie).
• Szerokość i wysokość dopasowują się do treści: Ich wymiary wynikają tylko z zawartości.
• Ignorują width i height: Jawne ustawienie szerokości i wysokości jest ignorowane.
• Ograniczone respektowanie marginesów i paddingów:
  • Marginesy i paddingi poziome (margin-left/right, padding-left/right) działają i odsuwają element od sąsiadów w linii.
  • Marginesy i paddingi pionowe (margin-top/bottom, padding-top/bottom) **nie wpływają** na otaczające elementy ani na wysokość linii (choć padding pionowy może wizualnie nachodzić na inne linie).
• Przykładami domyślnych elementów inline są: <span>, <a>, <strong>, <em>, <img> (choć img ma pewne cechy inline-block), <button>, <input>, <label>.

span {
  display: inline; /* Domyślne dla span */
  padding: 5px 10px; /* Padding poziomy działa, pionowy nie wpływa na układ */
  margin: 0 5px; /* Marginesy poziome działają */
  background-color: lightpink;
  /* width: 100px; - ignorowane */
  /* height: 50px; - ignorowane */
  /* margin-top: 10px; - ignorowane dla układu */
}

div.make-inline {
  display: inline; /* Zmienia div w element liniowy */
  background-color: lightgreen;
}

display: inline-block;

Elementy z display: inline-block; łączą cechy elementów inline i block:

• Nie zaczynają się w nowej linii: Układają się w jednej linii z innymi elementami inline lub inline-block (jak elementy inline).
• Respektują width i height: Można im jawnie ustawić szerokość i wysokość (jak elementy block).
• Respektują marginesy i paddingi: Można im ustawiać marginesy i paddingi ze wszystkich czterech stron, które wpływają na otaczające elementy (jak elementy block).

inline-block jest bardzo przydatny do tworzenia elementów, które mają zachowywać się jak bloki (mieć wymiary, marginesy), ale jednocześnie układać się obok siebie w linii, np. przyciski, elementy nawigacji, małe karty.

button, .card {
  display: inline-block; /* Domyślne dla button, ustawiamy dla .card */
  width: 150px;
  padding: 10px;
  margin: 5px;
  background-color: beige;
  border: 1px solid brown;
  text-align: center;
}

span.make-inline-block {
    display: inline-block;
    width: 80px;
    height: 40px;
    margin: 10px;
    background-color: lightcoral;
}

Problem z odstępami w inline-block: Elementy inline-block traktują białe znaki (spacje, entery) w kodzie HTML między nimi jako pojedynczą spację, co może powodować niechciane odstępy wizualne. Można to obejść, np. usuwając białe znaki w HTML, ustawiając font-size: 0; na rodzicu (i przywracając go na dzieciach) lub używając Flexbox/Grid.