В чем разница между блочными и встроенными элементами?

Question

Accepted Answer

Каждый элемент имеет поведение **display** по умолчанию, которое контролирует его поток в макете. - **Блочные** элементы начинаются с **новой строки** и занимают **полную доступную ширину**. Они принимают width/height и все margin/padding. Примеры: `

`, `

`, `
`, `
`. - Встроенные элементы текут внутри строки, только такие широкие, как их содержимое, и игнорируют width/height и верхний/нижний margin. Примеры: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Почему это важно ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Установка `width`/`height` на встроенный элемент ничего не делает. Решение — изменить его display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — лучшее из обоих миров `inline-block` находится в потоке текста (бок о бок) и* соблюдает width/height/margin — идеально подходит для элементов навигации, значков или кнопок, расположенных в строку. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Почему это важно Понимание display по умолчанию объясняет, почему `` не принимает высоту, почему `
`s складываются в стопку и когда переходить на `inline-block`, `flex` или `grid`. Это основа того, как элементы располагаются до того, как вы применяете какую-либо систему макета.