Box parts from inner to outer: content, padding, border, margin.
Boxes can contain other boxes.
CSS box-sizing controls which box parts are used to measure its width and height.
| box-sizing | dimensions include |
|---|
| content-box | content |
| padding-box | content, padding |
| border-box | content, padding, border |
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.
- 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.
/* Prevent margin collapse via invisible pseudo */
.uncollapse:before,
.uncollapse:after { content:" "; display:table; }