盒子模型:

head:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
    #div1{
        width: 200px;
        height: 100px;
        margin: 15px;
        padding: 20px;
        border: 10px solid #222222;
        box-sizing: content-box;
    }
    #div2{
        width: 200px;
        height: 100px;
        margin: 15px;
        padding: 20px;
        border: 10px solid #222222;
        box-sizing: border-box;
    }
</style>

body:

<div id="div1">盒子模型</div>
<div id="div2">怪异盒子模型</div>

外补白:

head:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .wrap{
        margin: 10px 30px 50px 100px;
        border: 2px solid #446644;
    }
    .content{
        margin: 10px;
    }
    h1{
        border-bottom: 8px double #007700;
        margin: 10px;
        text-align: center;
    }
    p{
        margin: 0 20px 10px;
    }
</style>

body:

<div class="wrap">
    <div class="content">
        <h1>外补白</h1>
        <p>外补白的区域是从盒子边框到向外部分的区域，外补白也常用于对页面布局，使用外补白也可以控制不同盒子间内容的间隔。</p>
    </div>
</div>