Box Sizing

The list of breeds has width: 250px and height: 220px, but since we added the padding, it takes up more space. By default, width and height set only the size of the content, and the padding and the border are added to it. The list of breeds is therefore 250 + 2 × 20 + 2 × 2 = 294 pixels wide (the content, the padding on both sides and the border on both sides) and 220 + 2 × 20 + 2 × 2 = 264 pixels tall.

This is set by the box-sizing property, whose default value is content-box. It isn't very practical: whenever you change the padding or the border, the size of the whole element changes. That's why there's the value border-box. With it, width and height include the padding and the border, and the content gets smaller instead.

Both boxes below have width: 200px, padding: 20px and a 1-pixel border. The first one has box-sizing: content-box and is 242 pixels wide, the second one has box-sizing: border-box and is 200 pixels wide:

The margin is never part of the size: it's the space outside the border.

Because border-box is much easier to work with, many stylesheets start with this rule, which sets it for all elements:

* {
	box-sizing: border-box;
}

On our page, it will only change the list of breeds. The other cards have no width set, so they are as wide as their parent, and their padding and border always fit inside.

Tip: You can check the sizes with Inspect: the developer tools show the box model of the selected element with all its numbers.