Differences in standard box model and weird box model

Standard box model (W3C box model)

 In order to do comparison, I'm going to let css style two boxes of the same;

 .w3c{
            width: 100px;
            height: 100px;
            padding: 5px;
            margin: 5px;
            border: 5px solid black;
            background: lightcoral;
        }
    <div class="w3c">

    </div>

This is the code standard box model

Strange box model (IE box model)

       .ie{
            width: 100px;
            height: 100px;
            padding: 5px;
            margin: 5px;
            border: 5px solid black;
            background: lightgreen;
            box-sizing: border-box;
        }
    <div class="ie">

    </div>

Comparison and analysis presented

Standard box model

Weird box model

 

Guess you like

Origin www.cnblogs.com/linxim/p/11918735.html
Recommended