Jaký je rozdíl mezi blokovými a vloženými prvky?

Question

IT Interview Practice · Accepted Answer

Každý prvek má výchozí chování **display**, které řídí, jak se prvek chová v rozvržení. - **Blokové** prvky začínají na **novém řádku** a zaujímají **veškerou dostupnou šířku**. Přijímají šířku/výšku a všechny vnější/vnitřní okraje. Příklady: `

`, `

`, `
`, `
`. - Vložené prvky se řadí v rámci řádku, pouze tak široké jako jejich obsah, a ignorují šířku/výšku a horní/dolní okraje. Příklady: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Praktická zrada ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Nastavení `width`/`height` na vloženého prvku nemá žádný vliv. Řešením je změna jeho display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — to nejlepší z obojího `inline-block` zůstává v textu (vedle sebe) a* respektuje šířku/výšku/okraje — ideální pro položky navigace, odznaky nebo tlačítka v řadě. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Proč na tom záleží Pochopení výchozího chování display vysvětluje, proč váš `` není přijmout výšku, proč se `
`y hromadí a kdy přepnout na `inline-block`, `flex` nebo `grid`. Je to základ toho, jak se prvky řadí, než aplikujete jakýkoliv systém rozvržení.

Praktická zrada

inline-block — to nejlepší z obojího

Proč na tom záleží

Související otázky