The CSS box model describes every element as an invisible box with four regions: content, padding, border, and margin. Content holds text or an image; padding adds space around it; the border surrounds the padding; and the margin adds space outside the border. section 4.2.3 section 4.5
Use these CSS properties to adjust each region:
- Set padding to give content room to breathe. One value applies to all four sides, while four values set top, right, bottom, and left independently. section 4.2.3
- Set a border to draw a line around the padding, such as 1px solid black. section 4.2.3
- Set margin to add whitespace outside the border and separate the element from nearby elements. section 4.2.3 section 4.5
Give a header room
A CSS rule such as `header { padding: 16px 24px 12px 20px; }` adds different amounts of space to the header’s four sides. For equal spacing, use `body { padding: 16px; }`.
