Тип вопроса:CSSВероятность:
10% Категория:Frontend Разработчик
Ответ
display: block создает блочный элемент, который занимает всю доступную ширину, начинается с новой строки и может иметь отступы (margin/padding). Например, <div> по умолчанию блочный.
display: inline-block сочетает свойства inline и block: элемент остается в строке (как inline), но может иметь ширину, высоту и отступы (как block). Например, кнопки (<button>) часто используют inline-block.
Block займет всю ширину и перенесется на новую строку.
Inline Block останется в строке, но сможет иметь размеры.
Ответ 18+ 🔞
Вот смотри, объясняю на пальцах, а то у тебя, я смотрю, глаза уже стекленеют.
Представь себе, что элементы на странице — это люди в очереди за халявными носками.
**`display: block`** — это как здоровенный мужик, который приходит и говорит: «Всё, я тут, расходитесь!». Он занимает **всю ширину** очереди, от края до края, и следующий за ним вынужден вставать с новой строки, то есть идти за ним. Это `
`, `
`, `
` — все эти ребята по умолчанию такие блочные качки. Им можно задать любые размеры — ширину, высоту, отступы вокруг себя (margin) — они всё проглотят.
**`display: inline-block`** — это хитрая жопа. С виду как обычный человек в очереди (`inline`), стоит в строчку с другими, не ломает её. Но внутри он — тот же блочный мужик! То есть, оставаясь в строчке, он **может иметь свою ширину, высоту и отступы**. Это как если бы ты в очередь втиснулся с чемоданом. Место в строчке ты держишь, но чемодан (твои размеры) — это твоё личное дело. Классический пример — кнопка (`