Convert EM to PX
Convert all EM values to pixels (PX) in css file for CSS, SCSS, SASS, and LESS.
Thanks a lot for using our tool, Please bookmark this URL for later use.EM ↔︎ PX conversion table
| Em | Px |
|---|---|
| 0.5em | 8px |
| 0.75em | 12px |
| 1em | 16px |
| 1.5em | 24px |
| 2em | 32px |
| 2.5em | 40px |
| 3em | 48px |
| 3.5em | 56px |
| 4em | 64px |
| 4.5em | 72px |
| 5em | 80px |
| 5.5em | 88px |
| 6em | 96px |
| 6.5em | 104px |
| 7em | 112px |
| 7.5em | 120px |
| 8em | 128px |
| 8.5em | 136px |
| 9em | 144px |
| 9.5em | 152px |
| 10em | 160px |
| 10.5em | 168px |
| 11em | 176px |
| 11.5em | 184px |
| 12em | 192px |
| 12.5em | 200px |
| 13em | 208px |
| 13.5em | 216px |
| 14em | 224px |
| 14.5em | 232px |
| 15em | 240px |
| 15.5em | 248px |
| 16em | 256px |
| 16.5em | 264px |
| 17em | 272px |
| 17.5em | 280px |
| 18em | 288px |
| 18.5em | 296px |
| 19em | 304px |
| 19.5em | 312px |
| 20em | 320px |
| 20.5em | 328px |
| 21em | 336px |
| 21.5em | 344px |
| 22em | 352px |
| 22.5em | 360px |
| PX | Em |
|---|---|
| 1px | 0.063em |
| 2px | 0.125em |
| 4px | 0.25em |
| 6px | 0.375em |
| 8px | 0.5em |
| 12px | 0.75em |
| 16px | 1em |
| 24px | 1.5em |
| 32px | 2em |
| 40px | 2.5em |
| 48px | 3em |
| 56px | 3.5em |
| 64px | 4em |
| 72px | 4.5em |
| 80px | 5em |
| 88px | 5.5em |
| 96px | 6em |
| 104px | 6.5em |
| 112px | 7em |
| 120px | 7.5em |
| 128px | 8em |
| 136px | 8.5em |
| 144px | 9em |
| 152px | 9.5em |
| 160px | 10em |
| 168px | 10.5em |
| 176px | 11em |
| 184px | 11.5em |
| 192px | 12em |
| 200px | 12.5em |
| 208px | 13em |
| 216px | 13.5em |
| 224px | 14em |
| 232px | 14.5em |
| 240px | 15em |
| 248px | 15.5em |
| 256px | 16em |
| 264px | 16.5em |
| 272px | 17em |
| 280px | 17.5em |
| 288px | 18em |
| 296px | 18.5em |
| 304px | 19em |
| 312px | 19.5em |
| 320px | 20em |
| 328px | 20.5em |
| 336px | 21em |
| 344px | 21.5em |
| 352px | 22em |
| 360px | 22.5em |
Advantages of PX over EM
In CSS, "em" and "px" are both units of measurement used to define the size of elements on a web page, but they have different characteristics and use cases. Here are some advantages of using "em" over "px" in your CSS.Absolute Sizing
Pixels are an absolute unit of measurement, meaning they provide a fixed and consistent size
regardless of the parent or ancestor elements. This can be advantageous when you want
elements to maintain a specific size without being influenced by their context within the document
hierarchy.
Precise Control
Pixels offer precise control over the layout and dimensions of elements. Designers can specify
exact pixel values to achieve a specific visual appearance, ensuring consistency across various
devices and browsers.
Consistency Across Elements
When using pixels, the size of an element is not affected by the font size of its parent or surrounding
elements. This can lead to more consistent visual appearance across different parts of a website,
especially when maintaining a specific design aesthetic or layout structure is crucial.
It's essential to note that the choice between pixels and em units often depends on the specific
requirements
of the CSS. While pixels provide precise control, em units are relative to the font size of the parent
element,
offering more flexibility and scalability.Many modern web designers use a combination of both units based on
the specific
needs of different elements within a layout.