EM → VH Converter
Converting from EM to VH is common when switching from ideal when you need sizing relative to parent elements. to useful for full-height layouts and hero sections. in CSS projects.
Conversion Form
About the Unit
EM: EM is a relative unit that depends on the font size of the parent element in which the current element is inserted. That is, 1em will be equivalent to the font size of the parent element. If the font size of the parent element is 20px, 1em will be equal to 20px. This unit is particularly useful when you want to create dynamic layouts that adjust based on the context of the parent element. For example, using em instead of px ensures that the size of fonts, margins, or other layout elements will scale relative to the text size of the parent component, making the design more flexible and responsive. A key detail about em is that it can accumulate when used in chain (i.e., if a child element uses em to set its size and the parent element also uses em, the value will multiply), which can lead to unexpected results if not used carefully.
Pro Tip: em → vh
Em scales based on parent element size, vh scales based on viewport height.
Quick Reference: Unit Conversion by Tens
| EM | VH |
|---|---|
| 10em | 14.814815vh |
| 20em | 29.62963vh |
| 30em | 44.444444vh |
| 40em | 59.259259vh |
| 50em | 74.074074vh |
| 60em | 88.888889vh |
| 70em | 103.703704vh |
| 80em | 118.518519vh |
| 90em | 133.333333vh |
| 100em | 148.148148vh |
| 110em | 162.962963vh |
| 120em | 177.777778vh |
| 130em | 192.592593vh |
| 140em | 207.407407vh |
| 150em | 222.222222vh |
| 160em | 237.037037vh |
| 170em | 251.851852vh |
| 180em | 266.666667vh |
| 190em | 281.481481vh |
| 200em | 296.296296vh |
| 210em | 311.111111vh |
| 220em | 325.925926vh |
| 230em | 340.740741vh |
| 240em | 355.555556vh |
| 250em | 370.37037vh |
Live Unit Preview
See how different CSS units affect the size of the box below:
10px
10rem
10em
10%
10vw
10vh
Common Mistake
Em scales based on parent element size, vh scales based on viewport height.
Real Code Example
/* Mobile-first card with em → vh */
.card {
padding: 0em; /* undefinedvh */
font-size: 1.5rem;
width: min(90vw, 40ch);
}Frequently Asked Questions About EM
When should I use em instead of em?
Use em when scaling relative to parent is needed.
How many em is 1em?
Depends on parent font size.
Is em affected by zoom?
Yes, it scales with parent and zoom.
Is em good for fonts?
Yes, especially for nested components.
Keyboard Shortcuts
- Ctrl + C: Convert
- Ctrl + I: Invert units
- Esc: Reset values