CODEWITHSUNDEEP
csspaddingpercentage
Probosckie
Probosckie

Reputation: 1812

Padding top as percentage of width not working

Here is my example 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 inspect element the computed style of the div, the width is coming as 25px as defined above but the padding-top is coming as 13.65px.

I know that the padding-top is calculated based on % of the width of the element. So it should be 1% of 25px or 2.5px.

Why is it coming as 13.65px?

Upvotes: 3

Views: 3891

Answers (1)

web-tiki
web-tiki

Reputation: 103810

On MDN for padding :

Percentages refer to the width of the containing block [source]

This means percentage padding is calculated according to the width of the parent element, not the element itself.

In your case padding top for #container is calculated according to the width of <body>.

Upvotes: 9

Related Questions