Jaka jest różnica między elementami blokowymi a liniowymi?

Question

Accepted Answer

Każdy element ma domyślne zachowanie **display**, które kontroluje, jak przepływa w układzie. - Elementy **Block** zaczynają się na **nowej linii** i zajmują **całą dostępną szerokość**. Akceptują width/height i wszystkie marginesy/padding. Przykłady: `

`, `

`, `
`, `
`. - Elementy Inline przepływają w obrębie linii, tylko tak szerokie, jak ich zawartość, i ignorują width/height oraz górny/dolny margines. Przykłady: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Dlaczego to ważne ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Ustawienie `width`/`height` na elemencie inline nic nie robi. Rozwiązaniem jest zmiana jego display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — najlepsze z obu światów `inline-block` znajduje się w przepływie tekstu (obok siebie) i* respektuje width/height/marginesy — idealne dla elementów nawigacji, odznak lub przycisków ułożonych w rzędzie. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Dlaczego to ważne Zrozumienie domyślnego display wyjaśnia, dlaczego `` nie przyjmuje wysokości, dlaczego `
`y się układają i kiedy przełączać się na `inline-block`, `flex` lub `grid`. To jest podstawa tego, jak elementy się układają, zanim zastosujesz jakikolwiek system układu.