Notes from Day 2

em vs. rem

When using font-size, em is relative to the parent element. For other properties,like margin, it's relative to the font-size of the current element. ems compound in size, so don't use it for font-size. It's useful when you want something like padding to scale to the text size properly.

    .example {
        /* changing this font size will also change the margin */
        font-size: 20px;
        margin-bottom: 2em;
    }

rem is relative to :root or <html> (even if you didn't define a font-size for it). It's okay to use for font-size.

Extra Videos

Exercise

There wasn't any exercise on this day.

Boat

Example: using em vs. rem for button padding

The only thing changing in these buttons is font-size and measurement type (em or rem).

em

The padding changes with the font size.

font-size: 1
font-size: 1.3
font-size: 1.6
font-size: 1.9
font-size: 2.2
font-size: 2.5
font-size: 2.8

rem

The padding doesn't change with the font size.

font-size: 1
font-size: 1.3
font-size: 1.6
font-size: 1.9
font-size: 2.2
font-size: 2.5
font-size: 2.8