box property not working with big padding value

2018-06-27 00:59:07

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?

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;
}

链接地址: http://www.djcxy.com/p/75602.html

上一篇: 哪个浏览器是正确的关于css3 flex

下一篇: box属性不适用于较大的填充值