Why are CSS margin and padding percentages relative to the width, not the height?

Why Margin/Padding Percentages in CSS are Tied to Width

The CSS Box Model defines that margin and padding percentages are calculated against the width of the containing block. This peculiar behavior has raised questions about its rationale.

Emphasized Excerpt from the CSS Box Model Spec

"The [margin] percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well."

Conjecture on the Reasoning

Impact on Parent Height as a Limiting Factor

An unfounded conjecture suggests that the decision may have stemmed from concerns about height calculation. Element heights are typically defined by their children's heights. If padding-top is applied as a percentage relative to the parent height, it affects the parent's height. However, as the height of the child is dependent on the parent's height and vice versa, this creates a dependency loop or inaccurate height calculation.

Nested Scenario Considerations

This concern is particularly relevant in cases where the parent's height is dependent on the child's height and the child's height is dependent on the parent's height (e.g., offset parent === parent). Resolving such cases becomes challenging due to the dependency loop or infinite calculation.

Example

Consider the following code snippet:

<div>

In this example, the inner div's top margin is calculated as 10% of the width of the parent div (200px), resulting in a 20px margin.

The above is the detailed content of Why are CSS margin and padding percentages relative to the width, not the height?. For more information, please follow other related articles on the PHP Chinese website!