Как работает свойство Display в css

Существуют несколько базовых правил, описывающих как должны быть размешены HTML-элементы и их поведение. Должно быть вы замечали разницу в поведении элементов div и span. Все зависит от свойства отображение — display.

Основные значения свойства display:

  • block

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

  • inline

Строчные элементы ведут себя как текст — они размещаются в строку. Вы не можете установить для них размеры или верхние и нижние отступы (margin). Каждый элемент будет размешен в строку (без переноса).

  • inline-block

Если вам нужны преимущества как блочного, так и строчного элементов, то существует значение inline-block

 

Давайте разберемся на примере. Создадим несколько блоков с одинаковым содержимым, но разными значениями свойства display.

 

display: block

Как мы видим блок растянулся на всю доступную ширину и можно задать любые отступы (margin). Каждый блок размещается с новой строки.

See the Pen MQgGaJ by webgrind (@webgrind) on CodePen.

display: inline

Во втором случае ширина блока определилась по его содержимому и изменить ее не получится. Каждый блок размещается без переноса на новую строку.

See the Pen pazVgE by webgrind (@webgrind) on CodePen.