Размер блока

У списка пород заданы width: 250px и height: 220px, но после добавления внутреннего отступа он занимает больше места. По умолчанию width и height задают размер только содержимого, а внутренний отступ и рамка добавляются к нему. Поэтому ширина списка пород — 250 + 2 × 20 + 2 × 2 = 294 пикселя (содержимое, внутренний отступ с двух сторон и рамка с двух сторон), а высота — 220 + 2 × 20 + 2 × 2 = 264 пикселя.

Это определяет свойство box-sizing, значение которого по умолчанию — content-box. Оно не очень удобно: стоит изменить внутренний отступ или рамку, и размер всего элемента меняется. Поэтому есть значение border-box. При нём width и height включают внутренний отступ и рамку, а уменьшается вместо этого содержимое.

У обоих блоков ниже width: 200px, padding: 20px и рамка в 1 пиксель. У первого box-sizing: content-box, и его ширина — 242 пикселя, у второго box-sizing: border-box, и его ширина — 200 пикселей:

Внешний отступ никогда не входит в размер: это пространство снаружи рамки.

Поскольку с border-box работать гораздо проще, многие таблицы стилей начинаются с этого правила, которое задаёт его для всех элементов:

* {
	box-sizing: border-box;
}

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

Совет: размеры можно проверить через Просмотреть код: инструменты разработчика показывают блочную модель выбранного элемента со всеми числами.