Percentage of width top padding does not work
Here's my sample code:
body {
margin: 0;
padding: 0;
border: 0;
background: #444;
}
#container {
width: 25px;
margin: auto;
margin-top: 2px;
padding-top: 1%;
border-bottom: 3px solid #58e;
background: #fff;
}
<div id="#container">text</div>
When I run it in chrome and check the element, the computed div style, the width will be 25px as defined above, but the top of the padding will be 13.65px.
I know padding-top is calculated based on the% width of the element. So it should be 1% of 25px or 2.5px.
Why is this happening like 13.65px?
+3
source to share
1 answer
On MDN to fill out:
Percentages refer to the width of the containing block [ source ]
This means that the percentage is calculated according to the width of the parent element , not the element itself.
In your case, the padding top for is #container
calculated according to the width <body>
.
+6
source to share