Display Block vs Inline: Understanding the Key Differences

display: block;

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

Пример:

  
Заголовок
  
Текст

display: inline;

Это свойство говорит браузеру, что элемент должен быть отображен как часть текущей строки родительского элемента. Элементы, отображаемые инлайн, не могут иметь заданных размеров и игнорируют отступы сверху и снизу.

Пример:

Текст

display: inline-block;

Это свойство говорит браузеру, что элемент должен быть отображен как часть текущей строки родительского элемента и иметь заданные размеры (ширину и высоту) и отступы.

Пример:

  Текст
  Текст

В этом примере два элемента span отображаются как часть строки, но имеют заданные размеры и отступы благодаря свойству display: inline-block.