В чем разница между inline, block и inline-block элементами в CSS?

Question

Элементы block занимают всю ширину родителя и начинаются с новой строки, элементы inline размещаются в одной строке и занимают только необходимую ширину, а inline-block совмещает свойства обоих — размещается в одной строке, но позволяет задавать ширину и высоту. Различие между этими типами влияет на построение и компоновку страницы.

YeaHub · Accepted Answer

В CSS существует три основных типа отображения элементов: block, inline и inline-block. Элементы типа block (например,

,

) занимают всю доступную ширину и начинаются с новой строки. Это означает, что следующие элементы будут размещаться под ними. Элементы типа inline (например, , ) располагаются в одной строке и занимают только ту ширину, которая требуется для их содержимого, не учитывая свойства ширины и высоты. Элементы типа inline-block сочетают в себе свойства обоих — они располагаются в строке, но можно задавать их ширину и высоту, как у блоков:
Block
Эти различия важны для понимания при создании макетов и управления расположением элементов на странице, особенно когда требуется комбинировать разные подходы к верстке.