Let's read a single card rule and trace each of the four box-model layers, one at a time.
.card { padding: 16px; border: 2px solid #1E2A5A; margin: 20px; box-sizing: border-box; }. Starting from the innermost layer outward: the CONTENT is whatever text sits inside the div here, 'Box model in action'. padding: 16px adds 16 pixels of empty breathing room on all four sides, between that text and the border without it, the text would touch the border directly. border: 2px solid #1E2A5A draws a 2-pixel solid navy line wrapping around that padding. margin: 20px then adds 20 pixels of empty space OUTSIDE the border, pushing any neighboring elements at least that far away this is what creates visible separation between this card and whatever sits next to it on the page.
box-sizing: border-box is the quiet but crucial last piece: without it, if you also set a width on this card, the 16px padding and 2px border would add ON TOP of that width, making the card wider than intended. With border-box, the width you set already accounts for the padding and border internally, so the card's final size stays exactly as expected.
Read the layers from the inside out: content, then padding, then border, then margin that order is always the same, no matter what element you're styling.