A proportion compares a part with a whole or another quantity. In frontend work, percentages express that relationship: a 50% child inside a 1000px parent becomes 500px wide. The useful question is always: percentage of what? section 6.3.1
CSS answers that question differently by property. Width, horizontal offsets, and horizontal padding or margins use a parent or containing-block width. Percentage heights need an explicit parent height. Line-height percentages use the element’s own font size. The surprising rule is that vertical margins and padding also resolve from the parent’s width, not its height. section 3.4.3 section 6.3.1
Trace nested proportions
Percentages multiply as they nest. With an 800px root, a parent at 50% is 400px; its child at 50% is 200px. In general: child width = root width × each percentage expressed as a decimal. Trace this chain before changing values when a nested layout appears unexpectedly small. section 3.1.3
Listing 3.3 The multiplicative progression of percentages
CSS:
.grandparent {
width: 800px;
}
.parent {
width: 50%; #1
}
.child {
width: 50%; #2
}
HTML:
<main class="grandparent">
<h1>Main (.grandparent)</h1>
<article class="parent">
<h2>Article (.parent)</h2>
<section class="child">
<h3>Section (.child)</h3>
</section>
</article>
</main>
Inspect the nested 50% containers to verify how each percentage takes its immediate parent as its reference. section 3.1.3
Proportions turn a fixed layout into a liquid one. First choose a readable maximum width for the outer container. Then convert each fixed child width with: element percentage = (element fixed width ÷ parent fixed width) × 100. A 640px article in a 960px container becomes 66.67%, so it scales as the container changes. section 6.3.4
Use proportional values deliberately:
- Set an image to width: 100% and height: auto so it fits its container without distortion. section 6.1.1
- Keep percentage padding and margins in the box-model calculation; content-box adds them outside the declared width, while border-box includes them. section 3.5.4
- Choose viewport units rather than percentages when the target is a share of the browser viewport instead of a share of the parent. section 6.4
- Convert a scroll ratio from 0 to 1 into a displayed percentage for a progress indicator’s width, label, and color. section 13.3.1
Proportion is not limited to layout. A scroll position divided by scrollable height produces a progress ratio; multiplying it by 100 yields a percentage for UI feedback. The same normalized value can drive a bar width and a color change, keeping several visual effects synchronized. section 13.3.1
