px vs em vs rem

px values are used by the browser as is, so 1px will always display as exactly 1px.Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design

When using rem units, the pixel size they translate to depends on the font size of the root element of the page, i.e. the html element. When using em units, the pixel value you end up with is a multiplication of the font size on the element being styled. they are relative to the font size “of the element on which they are used”. Parent element font sizes can effect em values, but when that happens it’s solely because of inheritance.

you might set the padding, margin and line-height around a navigation menu item to use em values. relative to current font-size Use em Units For:

Any sizing that should scale depending on the font-size of an element other than the root.

Don’t Use em Units for Font Sizes Use rem units for:

Any sizing that doesn’t need em units for the reasons described above, and that should scale depending on browser font size settings.