Four layers
The browser lays out every element as a rectangle, a box. Each box has four layers, from the inside out: content, padding, border and margin. Here one box, the .card div, is built from this CSS rule, one line at a time.
Building the box
width: 200px; and height: 120px; set the size of the content area, where text and images go. By default they size only this innermost layer, so the content is exactly 200 by 120 pixels.
padding adds space inside the box, between the content and the border, on all four sides. The box's background fills it. The box grows to 240 pixels wide: 20 + 200 + 20. The content stays 200.
border draws a line around the padding, 10px thick on every side. solid is the line's style; with no colour given, it uses the text colour. The box is now 260 by 180 pixels.
margin adds empty space outside the border. It is always transparent. It pushes things apart: the card moves 30px in from its parent's edge, and the next box moves down to leave 30px below the card.
Measuring it
Across, border to border: 10 + 20 + 200 + 20 + 10 = 260px, although width says 200. Down: 180px. With 30px of margin above and below, the card takes 240px of height before the next box starts.
box-sizing: border-box; changes what width and height measure: now the outside of the border. Padding and border fit inside 200 by 120, so the content shrinks to 140 by 60. The margin still sits outside.
What happens
;; step 1/7 · four-layers every element = a box, four layers: content the text and images padding space inside, around the content border a line around the padding margin space outside, between boxes .card with every line applied: 260 × 180 border to border
A real browser applies all of a rule's declarations at once. The figure applies them one at a time so you can see what each one does. Widths and depths in the drawing are to scale (the same number of drawing units for every CSS pixel); the layer heights are only there to show the layers. The next box is drawn 40px tall.