PX to percent converter

Percentages are relative to different things

This is the single most important thing to know about percentages in CSS, and it is why they cause more layout surprises than any other unit. The reference depends on the property.

The padding row is the famous one, and it is genuinely useful: padding-top: 56.25% on an empty box produces a 16:9 aspect ratio, because 9/16 = 0.5625 of the width. Modern CSS has aspect-ratio for this, but the trick is still everywhere in older code.

Percentage font sizing

% = px ÷ parent font size × 100

Parent 16px:
  14px → 87.5%
  18px → 112.5%
  20px → 125%

A percentage font size is arithmetically identical to em — 87.5% and 0.875em compute to exactly the same value — so it compounds through nesting in exactly the same way. Four nested levels of 90% leave you at 65.6% of where you started.

Where percentage font sizing is still standard

On the root element, where it means something rem and em cannot:

html { font-size: 100%; }   /* respect the user's chosen size */
html { font-size: 62.5%; }  /* the "1rem = 10px" trick */

100% is the honest default. It is also the reason not to write html { font-size: 16px }: that pins the root to 16 regardless of what the user asked for, which defeats the whole point of using rem below it.

Converting a width to a percentage

Set the parent field to the container’s width in pixels rather than a font size, and read the percentage. A 320px sidebar inside a 1200px container is 26.6667%.

Two caveats before you use that number. Percentage widths do not account for gaps, padding or borders unless box-sizing: border-box is set, so three columns at 33.3333% with a gap will wrap. And in most modern layouts you should not be computing this at all — CSS Grid (grid-template-columns: 2fr 1fr) and Flexbox handle the arithmetic and the gaps for you.

Repeating decimals

A third is 33.333…%, and where you truncate matters. Browsers work in sub-pixel precision, so 33.3333% is close enough that rounding is invisible; 33.33% across three columns of a 1200px container leaves a 0.36px gap, which sounds like nothing and shows up as a one-pixel seam against a contrasting background. Use four decimal places, or use fr units and let the layout engine distribute the remainder exactly.