Understanding how elements are sized and spaced
Every HTML element is a rectangular box with four areas: content, padding, border, and margin. Understanding this is fundamental to CSS layout.
Visual Order (inside to outside): Content → Padding → Border → Margin
The actual content of the element (text, images, etc.). Size controlled by width and height properties.
div { width: 300px; height: 200px; }
Example: Sets the content area to 300px wide by 200px tall
Space around the content, inside the border. Creates breathing room between content and border.
div { padding: 20px; }
Example: Adds 20px of space on all four sides of the content
Individual sides: padding-top, padding-right, padding-bottom, padding-left
A line that wraps around the padding and content. Can be styled with width, style, and color.
div { border: 2px solid black; }
Example: Creates a 2px solid black border around the element
Properties: border-width, border-style, border-color
Space outside the border. Creates distance between elements. Margins can collapse.
div { margin: 30px; }
Example: Adds 30px of space outside the border on all sides
Individual sides: margin-top, margin-right, margin-bottom, margin-left
Centering trick: margin: 0 auto; (centers block elements)
Controls how width and height are calculated.
* { box-sizing: border-box; }
content-box (default): Width/height applies to content only. Padding and border are added to total size.
border-box (recommended): Width/height includes content, padding, and border. Much easier to work with!