css border-box property not working with big padding value

Question

according to the MDN I have read "border-box tells the browser to account for any border and padding in the value you specify for width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width"

but in my case i have set two div box:

    <style type="text/css">
    .container{
        width: 300px;
        height: 300px;
        background: blue;
        margin: auto;
    }

    .child{
        width: 150px;
        height: 150px;
        background: yellow;
        border: 2px solid red;
        box-sizing: border-box;
        padding: 200em;
    }
</style>

<body>
    <div class="container">
        <div class="child">
            <h1>test</h1>
        </div>
    </div>


</body>

I have set the container div box with 300px height and width, the child div with 150px height and width with border-box property, but after i have given a big padding value to the child div box with 200em the container box is not shrunk to absorb the extra width. I am wondering why is that?

https://stackoverflow.com/questions/9490974/margin-and-padding-using-em — dippas, Oct 28 '17 at 18:20

score 0 · Answer 1 · answered Oct 28 '17 at 22:36

They are 2 separate things. border-box doesn't restrict the size, it just means that the final size includes the border and padding. So if the inner box has a border and padding, and it expands to 400px the size will be 400px including border and padding.

One adjustment you can make to your css, for testing, is to make the outer div 300px, no matter the size of the inner:

/* add min and max. */
.container {
    min-width: 300px;
    min-height: 300px;
    max-width: 300px;
    max-height: 300px;
    background: blue;
    margin: auto;
}

score 0 · Answer 2 · answered Mar 07 '20 at 23:54

The border-box makes padding absorb pixels from the content. Imagine you have a div of 100px width so when you increase padding the width will decrease to make the full size equal to 100px .

if you make padding:10px from the right and left , the width will decrease by 20px (width = 80px) to make the full size equal to 100px.

example 1 - if you make padding:20px from the right and left , the width will decrease by 40px (width = 60px) to make the full size equal to 100px. example 2 and so on

css border-box property not working with big padding value

2 Answers2