How do percentage values get their reference size in CSS?

The useful general rule is that the property determines what a percentage refers to. There is no universal “percentage of the parent’s width” rule. For instance, font-size percentages use the parent’s font size, while width percentages use the parent’s width. Some properties do not accept percentage values at all. [S1]

When you see a percentage, ask two questions: “Does this property allow percentages?” and “What reference does this property use?” The answer depends on the property, not simply on where the element sits.

For font-size, calculate the percentage from the parent’s font size. As a simple example, if the parent is 20px and the child has font-size: 125%, the child’s font size is 25px: 20 × 1.25. The parent size is the reference, not the child element’s width. [S1]

You can make the relationship visible in a small example:

.parent {
  font-size: 20px;
}

.child {
  font-size: 125%;
}

This calculation assumes the parent’s computed font size is 20px. If you do not know that value, inspect the parent’s computed styles rather than guessing. This example explains font-size; it does not establish a rule for every typography-related property.

border-width accepts lengths rather than percentages, so there is no percentage reference size to calculate for it. [S1]

For example, this is not a valid way to request a border whose thickness is a fraction of the parent’s width:

.box {
  border-width: 2%;
}

If you want a particular border thickness, choose a supported length value and check the result in your layout. The important distinction is between a percentage using an unexpected reference and a property that does not allow percentages. This point applies to border-width; it does not establish the rules for every border-related property.

Not quite. For background-position, the percentage is applied to the difference between the background positioning area and the image’s size along that axis. At 50%, the image’s midpoint aligns with the positioning area’s midpoint; it is not simply an offset equal to half the area’s size. [S2]

Suppose, for illustration, the area is 300px wide and the positioned image is 200px wide. The difference is 100px. At 50%, the offset is half that difference, or 50px, so the image’s center lines up with the area’s center. The same idea applies along the other axis. This example assumes those dimensions and does not establish how large an image will be in a real layout.

Here’s a compact property-reference guide:

• font-size: 125% — percentage of the parent’s font size. [S1]
• width: 50% — percentage of the parent’s width. [S1]
• border-width: 2% — percentages are not accepted for this property. [S1]
• background-position: 50% — aligns the image’s midpoint with the positioning area’s midpoint on that axis. [S2]

When a result surprises you, identify the exact property, then check its accepted value types and percentage reference. These examples cover only the named properties; they do not establish percentage rules for every CSS property.