Little Known
CSS Basics The Box Model

Everything Is A Rectangle

All rectangles have:

• height
• width

Height defaults to content height

Width defaults to block formatting default

• block — 100%
• inline / inline-block — content width

Override width and height with:

• explicit width & height properties
• also min- and max- versions

What Controls
“Default” Width & Height?

CSS!

• margin
• border
• padding
• contents

margin

margin pushes elements away from other elements

Neighboring margins collapse.

E.g., margin-bottom: 10px followed by margin-top: 20px creates a 20px gap.

padding

padding pushes an element's contents away from its edges

Note: there's a caveat with padding coming later…

border

border adds to an element's height and width (like margin); it doesn't force its contents in (like padding).

The Box Model

Element Contents

What Controls which CSS Properties Control “Default” Width & Height?

box-sizing

content-box: padding can affect element size (browser default, ugh)

border-box: padding doesn't affect element size (every reset/normalize CSS)

.box {
  padding: 20px;
  height: 140px;
  width: 500px;
}

display

If an element is inline, its padding won't force it off the baseline, and it won't respond to vertical margin.

If an element is inline-block (or block), its padding will affect its baseline, and it will respond to vertical margin.

em {
  padding: 10px;
  margin: 10px 40px;
  background-color: rgba(0,0,0,.5);
}

float

float makes an element's width exactly what its contents need, even if it's a block element.

All other elements (that aren't explicitly cleared) flow around a floated element.

Parent Element's CSS

display: table

display: flex

display: grid

display: table

Children behave like display: table-row…

… unless they're set to be display: table-cell.

display: flex

Children are sized according to flexbox rules applied to parent…

… and flexbox rules applied to children.

display: grid

Children are sized according to grid rules applied to parent…

… and grid rules applied to children.

That's another talk though…

Review

Element Size Controlled By:

• margin
• border
• padding
• contents

The Box Model

Element Contents

Size Properties Affected By:

• box-sizing
• display
• float
• parent CSS