◤ The Box Model

Every Element Is a Box

The CSS box model says every HTML element occupies a rectangular box with four layers from inside out:

• Content — the actual text or image. Sized with width and height.
• Padding — transparent space between content and border. Adds internal breathing room.
• Border — a visible (or invisible) line around the padding.
• Margin — transparent space outside the border. Pushes other elements away.

box-sizing: border-box Is Your Friend

By default (content-box), padding and border are added on top of width. So a 200px-wide box with 20px padding is actually 240px wide. This is confusing! Setting box-sizing: border-box makes width include the padding and border — the box stays exactly 200px wide. Nearly every modern project starts with:

*, *::before, *::after { box-sizing: border-box; }