Строчно-блочные элементы

Иногда хочется взять лучшее от обоих: элементы, которые выстраиваются в ряд, как строчные, но размеры которым можно задавать, как блокам. Именно это делает значение inline-block. Снаружи такой элемент ведёт себя как строчный: стоит в строке рядом с другими элементами, а когда в строке не остаётся места, переходит на следующую. Внутри это блок: на него действуют width, height, внутренние отступы и все внешние отступы.

Кнопки (button) по умолчанию строчно-блочные. Поэтому их можно поставить в ряд и при этом задать им размер.

Породы внизу страницы оформлены как карточки с шириной, внутренними отступами и рамкой. Но как элементы списка они стоят друг под другом. Давайте поставим их в ряд.