HTML and CSS Reference
In-Depth Information
1.5em 21px 22.5px 24px 25.5px 27px
2em 28px 30px 32px 34px 36px
2.5em 35px 37.5px 40px 42.5px 45px
3em 42px 45px 48px 51px 54px
The top row represents the font size for any given element. The left column represents the
em units. So, for example, if the font size is 15px and you declare 2.5em for something on
that element, just run your finger across until you find the cell that intersects 2.5em and 15px.
This brings you to the cell that says 37.5px (or, 15px multiplied by 2.5).
Rem Units
This is a newer CSS unit that's worth getting to know. As you can see from the em unit ex-
ample we just discussed, em units can be a bit tricky to deal with, especially when their value
is inherited from a parent element. The rem unit seeks to solve this problem by calculating its
value based on the font size of the
<html>
element.
Let's use the same HTML from the em unit example to demonstrate rem units:
html {
font-size: 22px;
}
.box {
font-size: 20px;
padding: 1.5em;
}
p {
font-size: 14px;
padding: 2rem;
}
Notice we've defined rem units on the paragraph element's padding, but we've kept the em
unit on the padding of the
.box
element. So what will the “
2rem
” value compute to?
