CC-BY

Box model

margin
border
padding
content
Box parts from inner to outer: content, padding, border, margin.

Descendant boxes

margin
border
padding
margin
border
padding
content
Boxes can contain other boxes.

Box sizing

CSS box-sizing controls which box parts are used to measure its width and height.

box-sizingdimensions include
content-boxcontent
padding-boxcontent, padding
border-boxcontent, padding, border

Margin collapse

Margin collapse is an innate CSS box model behavior that causes adjoining vertical margins to consolidate into one. It causes excess serial margins to be voided rather than added. It can occur to empty boxes, between adjacent boxes, or between direct descendants. It is often beneficial. Certain contexts or rules can prevent its occurrence.

3 types

  • Sibling margin collapse occurs between two adjacent boxes.
  • Parent margin collapse occurs between a parent and its own :first-child or :last-child.
  • Self margin collapse occurs when a box's top/bottom margins touch due to empty inner box values.

Uncollapse

/* Prevent margin collapse via invisible pseudo */
.uncollapse:before,
.uncollapse:after { content:" "; display:table; }