HTML\CSS → Свойство display:inline-block

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

Особенности inline-blockов:

1. Им можно задавать размеры, рамки и отступы, как и блочным элементам;
2. Их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;
3. Они не порождают принудительных переносов строк, поэтому могут располагаться на одной строке, пока помещаются в родительский контейнер;
4. Элементы в одной строке выравниваются вертикально подобно строчным элементам (vertical-align).

От строчных элементов им достались следующие черты:

1. по ширине они ужимаются под своё содержимое;
2. могут располагаться в одну строку;
3. реагируют на вертикальное выравнивание, vertical-align;
4. реагируют на горизонтальное выравнивание, text-align, заданное у родителя.

От блочных:

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