inline, block и inline-block
Вопрос
Чем отличаются display: inline, block и inline-block? Приведи пример, когда нужен каждый.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
block занимает всю доступную ширину и начинается с новой строки
inline течёт в строке, игнорирует width и height
У inline вертикальные margin не сдвигают соседей
inline-block стоит в строке, но принимает размеры и отступы как блок
Примеры: `<p>` и `<div>` блоки, `<a>` и `<span>` строчные, кнопка-тег inline-block
Сегодня для раскладки в ряд чаще берут flex, а не inline-block
Что могут спросить следом
- Откуда берётся зазор между inline-block элементами?
- Что делает
display: contents? - Как ведёт себя
<img>по умолчанию?
Разбор
Блочный элемент занимает всю доступную ширину родителя и начинается с новой строки; у него работают width, height и все отступы. Это <div>, <p>, <section>. Строчный элемент течёт внутри текста, как слово: ширину и высоту ему задать нельзя, размер даёт содержимое, а вертикальные margin и padding не раздвигают строки. Это <a>, <span>, <strong>. inline-block объединяет оба поведения: стоит в строке рядом с текстом, но принимает размеры и отступы. Так раньше делали ряды кнопок или тегов. У него есть известный побочный эффект: пробелы в разметке между элементами дают зазор в несколько пикселей. Сейчас для раскладки в ряд обычно берут flex, а inline-block остаётся для небольших элементов внутри текста.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.