在网页设计中，我们必须要理解盒模型的概念以及应用。
盒模型的概念很容易理解，我先上图。
我先上代码，然后就很容易解释了
<html>
<head>
<style>
#box1{margin:10px 10px 10px 10px;
border:1px dotted red;
padding:10px 10px 10px 10px;
width:100px;
height:100px;
}
#box2{
margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px;
border:1px dotted red;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box1">123</div>
<div id="box2">123</div>
</body>
</html>
很明显的，border是外框，这里的dotted是点线，同时还有solid实线，dashed虚线。
padding是内部距离，这里要说一下，除了这种写法之外，还有padding-top，padding-left，padding-right，padding-bottom，我这种写法的顺序是上，右，下，左的顺时针顺序。
margin是外部距离，和上面一样，margin也和padding一样，有着margin-top，margin-bottom，margin-right和margin-left，顺序也是顺时针。
width和height是内部大小。
上图
怎么样，是不是很简单2333？
来源：https://www.cnblogs.com/yuhailong/p/5957636.html