Спросят с вероятностью 3%
Есть несколько значений для свойства
display, которые определяют, как элемент будет отображаться на странице. Два из этих значений — inline и inline-block — имеют некоторые сходства, но и значительные отличия.1️⃣ Inline элементы
Элементы с
display: inline; ведут себя как часть текста. Это значит, что:- Они располагаются на одной строке с другими инлайн-элементами или текстом, если только ширина родительского элемента не заставляет их обтекать.
- У инлайн-элементов нельзя задать ширину (
width) и высоту (height), так как размеры определяются содержимым.- Вертикальные отступы (
margin-top и margin-bottom) и вертикальные внутренние отступы (padding-top и padding-bottom) не влияют на расстояние между инлайн-элементами вертикально, хотя могут влиять на фоновое изображение или цвет.- Горизонтальные отступы и внутренние отступы применяются нормально.
Примеры инлайн-элементов:
<span>, , <img>.2️⃣ Inline-block элементы
Элементы с
display: inline-block; комбинируют некоторые свойства инлайн и блочных элементов:- Как и инлайн элементы, эти элементы располагаются на одной строке с другими инлайн-элементами или текстом.
- В то же время, у них можно задать ширину и высоту, как у блочных элементов.
- Вертикальные и горизонтальные отступы (
margin и padding) работают как у блочных элементов, влияя на расстояние вокруг элемента во всех направлениях.- Элементы могут содержать другие блочные или инлайн элементы.
Это делает его очень удобным для создания компонентов пользовательского интерфейса, которые должны располагаться в одной строке (например, кнопок), но при этом требуют точного контроля над размерами и отступами.
Основное отличие между
inline и inline-block элементами заключается в том, что inline-block сочетает в себе способность располагаться в строке с другими элементами, как у inline элементов, и при этом позволяет контролировать размеры и отступы, как у блочных элементов. Это делает inline-block мощным инструментом для создания сложных компонентов интерфейса, которые требуют одновременно и горизонтального выравнивания, и точного контроля над макетом.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.
🔐 База собесов | 🔐 База тестовых