Module 3 - The Box Model

Projects


1. box-model	CSS Box Model
2. displays	The various CSS displays: block, inline, inline-block
3. borders	Fun examples of things you can do with CSS borders
4. box-sizing	The box-sizing bug and how CSS 3 solves it
5. margin-collapsing	The margin collapsing "feature" and how to solve it

Box Model

Content Width and Height
Padding
Border
Margin

Sizing Units

px
%
em and ex
vw, vh, vmin and vmax
cm and mm

Displays

Display Block
Display Inline
Display Inline-Block

Fun with Borders

Border parts and sizing
Border Styles
Rounded Corners
Shadows
Border Images

Margin Collapsing

Vertical Block elements collapse
Horizontal elements do not collapse
Only adjacent elements collapse
Nested elements collapsing
Collapsing more than two elements
Margin with Flex or Grid
Using the gap property

Box Sizing

The problem with CSS 2 Box sizing
The box-sizing property
border-box vs content-box

Extra links