В чем разница между inline, block и inline-block элементами в CSS?
Этот вопрос помогает определить, понимает ли кандидат разницу между основными типами отображения элементов и их поведение в документе.
Короткий ответ
Элементы block занимают всю ширину родителя и начинаются с новой строки, элементы inline размещаются в одной строке и занимают только необходимую ширину, а inline-block совмещает свойства обоих — размещается в одной строке, но позволяет задавать ширину и высоту. Различие между этими типами влияет на построение и компоновку страницы.
Длинный ответ
В CSS существует три основных типа отображения элементов: block, inline и inline-block. Элементы типа block (например, <div>, <h1>) занимают всю доступную ширину и начинаются с новой строки. Это означает, что следующие элементы будут размещаться под ними. Элементы типа inline (например, <span>, <a>) располагаются в одной строке и занимают только ту ширину, которая требуется для их содержимого, не учитывая свойства ширины и высоты. Элементы типа inline-block сочетают в себе свойства обоих — они располагаются в строке, но можно задавать их ширину и высоту, как у блоков:
<div style="display: inline-block; width: 100px; height: 50px;">
Block
</div>
Эти различия важны для понимания при создании макетов и управления расположением элементов на странице, особенно когда требуется комбинировать разные подходы к верстке.