Child padding set in %, when the parent has padding as well

• Component: CSS
• Status: RESOLVED DUPLICATE

[Aleksey]

Steps to reproduce:

1. Create a parent div with left and right padding.
2. Place another div into the div from step 1.
3. Set the child's width and padding in percents - for example, 100%.
HTML:

<div class="parent padded"></div>
<div class="parent"></div>

CSS:

.parent{
    position:relative;
    width:200px;
    height:100px;
}
.parent.padded{
    padding:20px 30px;
}
.parent:after{
    position:absolute;
    bottom:0;
    left:0;
    box-sizing:border-box;
    width:50%;
    padding-bottom:50%;

    content:"";
}

Since CSS block's width and padding (all sides) depend on  the block's parent't width, both width and padding of the child div should be calculated based on a common formula: the parent width should either include padding or not. Ideally, this should depend on the box-sizing property.

So, width: 50% and padding:50% should calculate to equal values.

But the problem is: the child's padding (which is in percents) does not respect the parent's paddings, while the child's width does.

In Firefox (v12, v22), Opera (12.15), IE 9 this works as I expect.  If it's not a bug, I would love to be pointed at some explaination. Maybe the behavior described is the right one.

Bump. This is still a problem in 2020.

[Ahmad Saleem]

I am not able to reproduce this bug since all browsers (Safari Technology Preview 155, Safari 16, Chrome Canary 109 and Firefox Nightly 107) render this same across all. Appreciate if someone can confirm and we can close this bug accordingly. Thanks!

Sorry, didn't receive an email for the last comment. This issue has been fixed and can be closed, see:
https://bugs.webkit.org/show_bug.cgi?id=221202

[Ahmad Saleem]

*** This bug has been marked as a duplicate of bug 221202 ***