Converter · CSS unit tool
Percentage to PX converter
For width-based lengths, px = (percent ÷ 100) × containingBlockWidth. So 50% of a 960px container is 480px. Height percentages only resolve when the parent has a definite height—see the notes below.
Result
600.00 px
50% × 1200px ÷ 100 = 600.00px
Keyboard tip: press Tab or Shift+Tab to switch fields.
The percentage to PX formula
Width, left/right padding, and left/right margins all resolve against the *containing block's width*: px = (percent ÷ 100) × parentWidth.
Top/bottom padding and margins also resolve against the containing block's width (not height)—a frequent surprise that the formula above still covers.
What is the containing block
The containing block is usually the content box of the nearest block ancestor, but positioning changes that: an absolutely positioned element resolves percentages against its nearest positioned ancestor.
Height percentages need an explicit height on the parent. If the parent is `height: auto`, a child's `height: 50%` has nothing concrete to resolve against and is ignored.
Copy-ready examples
/* parent width 960px */
.col { width: 50%; } /* → 480px */Frequently asked questions
- Why is my percentage height being ignored?
- The parent likely has auto height. Give the parent a definite height (or use fl/ grid) so the percentage has something to resolve against.
- Do top and bottom margins use height?
- No. Vertical margins and padding in percent resolve against the containing block's width, which often surprises people.
- Is percentage to px converter free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.