How elements occupy space.
WHAT EVERY ELEMENT HAS
Content Padding, inside the border A border Margin, outside the border
WHAT THE DEFAULT SIZING DOES
Applies width to the content only, with padding and border added outside it.
WHAT THAT CAUSES
An element declared at a given width occupying more than that.
WHAT TO DO ABOUT IT
Set sizing to include padding and border within the declared width, globally.
WHY
It makes layout behave as most people expect.
WHAT MARGIN COLLAPSE IS
Adjacent vertical margins combining into one, rather than adding.
WHY IT SURPRISES PEOPLE
Spacing appears smaller than the sum of the margins.
WHAT TO DO ABOUT IT
Use a consistent approach: spacing in one direction only, or gaps in layout containers.
WHAT UNITS TO USE
Relative units for text, so it scales with user preferences Relative units for spacing, so it scales with text Fixed units sparingly
WHY RELATIVE UNITS FOR TEXT
Fixed sizes ignore the user's chosen text size.
WHAT TO AVOID
Fixed heights on anything containing text.
WHY
Text grows, and fixed heights clip it.
