В чем разница между Block и Inline Block

display: block создает блочный элемент, который занимает всю доступную ширину, начинается с новой строки и может иметь отступы (margin/padding). Например, <div> по умолчанию блочный.

display: inline-block сочетает свойства inline и block: элемент остается в строке (как inline), но может иметь ширину, высоту и отступы (как block). Например, кнопки (<button>) часто используют inline-block.

Пример:

<div style="display: block; background: lightblue;">Block</div>
<span style="display: inline-block; background: lightgreen;">Inline Block</span>

• Block займет всю ширину и перенесется на новую строку.
• Inline Block останется в строке, но сможет иметь размеры.