display: inline-block

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

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

Особенности блочно-строчных элементов:

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