Свойство display: inline-block

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

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

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

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