CSS Box Model: Every Element is a Box
Every HTML element is a box with layers: content, padding, border, and margin. This model dictates how elements take up space and align, forming the basis of all CSS layout. The footgun is the default sizing, which adds padding *outside* the set width.
Think of every HTML element as a box with four layers: the content itself, surrounding padding, a border, and an outer margin. This model is how browsers calculate an element's size and position, making it fundamental for all page layout. It's used everywhere from simple button spacing to complex responsive grids. The common footgun is the default `content-box` setting, where adding padding or a border increases the element's total size beyond its declared `width`, often breaking your layout. `box-sizing: border-box` fixes this.
Read the original → Wikipedia: CSS box model
- #css
- #web development
- #layout
- #frontend
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.