xy.css

CSS tools

Unit Conversions

Quick reference for doing CSS unit conversions for ems, pixels, and percentages.

em -> %  => [ width em ] x [ 100% ] / [ parent width em ] = width %
em -> px => [ width em ] x [ 12 px ] / [ 1 em ]           = width px 

px -> %  => [ width px ] x [ 100% ] / [ parent width px ] = width %
px -> em => [ width px ] x [ 1 em ] / [ 12 px ]           = width em 

% -> em => [ width % ] x [ parent width em ] / [ 100% ] = width em
% -> px => [ width % ] x [ parent width px ] / [ 100% ] = width px