How is margin-top percentage calculated in CSS?

Margin-Top Percentage Calculation in CSS

Calculating the margin-top percentage in CSS requires comprehension of its reference point. Unlike intuitive assumptions, it's not calculated from the parent's height but rather its width.

Delving into the W3C Spec

The W3C specification clearly states, "The percentage is calculated with respect to the width of the generated box's containing block." This holds true for both margin-top and margin-bottom.

Ensuring Consistency and Avoiding Circular Dependency

Percent-based margins on all sides (margin-top, -right, -bottom, -left) provide consistency in layout. Utilizing a percentage for both horizontal and vertical margins avoids disparities in margin sizes.

Additionally, vertical margins based on the container's width avert circular dependency in page layout. Block height depends on its contents, while content height requires calculations that include top and bottom margins. By anchoring vertical margins to container width, this dependency is broken, enabling effective layout.

Code Example

.container {<br>  background: lightblue;<br>  padding: 10px;<br>  height: 100px;<br>  width: 500px;<br>}</p>
<p>p {<br>  display: block;<br>  border: 1px solid red;<br>  margin-top: 50%;<br>}<br>

Upon execution, the margin-top is measured relative to the container's 500px width, resulting in a margin of 250px.

The above is the detailed content of How is margin-top percentage calculated in CSS?. For more information, please follow other related articles on the PHP Chinese website!