Jaki jest główny sens właściwości display w CSS i jak…

Właściwość display określa, jak element będzie wyświetlany w dokumencie i jak będzie wchodził w interakcje z innymi elementami, uczestnicząc w przepływie układu (layout flow). Ustawia typ bloku formatowania elementu.

Główne wartości:

block: Element jest formatowany jako blok. Zajmuje całą dostępną szerokość, zaczyna się od nowej linii i może mieć ustawione rozmiary (width, height).
inline: Element jest formatowany jako inline. Nie zaczyna nowej linii, zajmuje tylko potrzebną szerokość i nie może mieć ustawionych rozmiarów (width, height). Marginesy pionowe (margin-top, margin-bottom) i wewnętrzne odstępy (padding-top, padding-bottom) nie wpływają na otaczające elementy.
inline-block: Element jest formatowany jako inline, ale zachowuje się jak blok wewnątrz linii. Nie zaczyna nowej linii, może mieć ustawione rozmiary (width, height) oraz marginesy i padding, które wpływają na otaczające elementy.
none: Element i jego zawartość nie są wyświetlane. Element jest całkowicie usunięty z przepływu dokumentu i nie zajmuje miejsca.
flex: Element staje się kontenerem Flex, a jego bezpośrednie potomki stają się elementami Flex. Używa się go do tworzenia elastycznych układów.
grid: Element staje się kontenerem Grid. Używa się go do tworzenia układów opartych na siatce.

Jak to działa:

Przeglądarka używa wartości display do określenia typu kontekstu formatowania, w którym znajduje się element. Ma to wpływ na:

Przepływ dokumentu: Jak element jest pozycjonowany względem sąsiadów.
Rozmiary elementu: Możliwość ustawienia szerokości i wysokości oraz wpływ zawartości na rozmiary.
Wpływ na otaczające elementy: Jak marginesy i rozmiary elementu wpływają na rozmieszczenie innych elementów.

Przykład:

/* Element z display: block */
div {
  display: block;
  width: 100%; /* Zajmuje całą szerokość */
  margin-bottom: 10px; /* Tworzy pionowy odstęp */
}

/* Element z display: inline */
span {
  display: inline;
  /* width i height są ignorowane */
  /* margin-top i margin-bottom są ignorowane */
}

/* Element z display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Można ustawić szerokość */
  height: 100px; /* Można ustawić wysokość */
  margin: 5px; /* Tworzy marginesy ze wszystkich stron */
}

/* Ukryty element */
.hidden {
  display: none;
}

Jaki jest główny sens właściwości display w CSS i jak ona działa?