CSS box model

Every element is a box: content + padding + border + margin. Know the order.

Code example

.card {
  padding: 16px;      /* inside border */
  border: 1px solid;  /* edge of box */
  margin: 8px;        /* outside border */
  width: 300px;       /* content width */
}
/* total width = 300 + 16+16 + 1+1 + 8+8 = 350px */

How it works

Every HTML element is rendered as a rectangular box. The box has four layers, inside-out: content (the text/image), padding (space inside the border), border (the visible edge), margin (space outside the border). When you set width:300px, that's the content width — the actual rendered width is content + padding + border. Use box-sizing: border-box to make width include padding+border (more intuitive). OpenBenchML's CSS sets box-sizing: border-box globally in style.css.