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

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

Override width and height with:

  • explicit width & height properties
  • also min- and max- versions
I'm a box.

What Controls
“Default” Width & Height?


  • margin
  • border
  • padding
  • contents


margin pushes elements away from other elements

Neighboring margins collapse.

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

I have no left / right margin.
margin is pushing me in from my parent's edges.


padding pushes an element's contents away from its edges

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

I have no left / right padding.
padding is pushing my contents away from my edges.


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

My border adds 20px to my width & height.
My border adds 10px to my width & height.
I'm half my parent's width.
I'm half my parent's width, too.

The Box Model

Element Contents

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


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;
box-sizing: content-box
actually 540px wide
box-sizing: border-box
actually 500px wide


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);
Just a normal paragraph with an inline element in it.
Now a paragraph with an inline-block element in it.


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.

I'm floated
In the markup, I come after the floated box and I'm allowed to flow just like normal in the document.

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: block (default)
display: block (default)
display: table-cell
display: table-cell

display: flex

Children are sized according to flexbox rules applied to parent…

… and flexbox rules applied to children.

display:block; align-self: flex-end

display: grid

Children are sized according to grid rules applied to parent…

… and grid rules applied to children.

That's another talk though…


Element Size Controlled By:

  • margin
  • border
  • padding
  • contents

The Box Model

Element Contents

Size Properties Affected By:

  • box-sizing
  • display
  • float
  • parent CSS

James Steinbach

UX Developer at DockYard


Twitter | Github | Blog