方法/步骤
1、padding内边距：文本与边框的距离。首先创建div标记和p标记宽高都设置成100像素。div标记内边距默认为0，如图操作设置为20内边距。如图所示效果，边框与文字的四周距离为20像素，而div标记宽高也变长了。问：怎么形象的理解内边距？答：可以这么理解，【边框】仿佛对【文本】说，你给我听好了，离我四周远点，20像素内的距离是我的地盘。
2、设置内边距会增加标记的宽高，p瞢铍库祢adding:20px;是一种简写方式，目的是为了我们提高代码的编写效螟苋镔柞率。意思是对上边距，下边距，左边距，右边距都设置成20px，如果一个一个设置将会很麻烦，例如padding:20px20px20px20px;如图操作，验证是否div标记宽高都增加了40像素，对p标记宽高设置成140像素，两者对比是相同的。问：为什么div标记宽高都增加了40像素，怎么计算？答：根据左边距20像素和右边距20像素，相加等于40像素，上下边距也一样，以此类推。
3、外边距：标记跟自身与之相邻的所有东西的距离。如图可以看到div红色边框和p标记蓝色边框有距离，这是因为p标记默认上边距有16像素。如图操作，设置为0即可。
4、设置div的外边距，如图效果可以看到，外边距对位置进行了移动，宽高没有发生变化。问：怎么形象的理解外边距？答：外边距仿佛在说：跟我与之相邻的的标记和文本四周都远离我20像素。
5、来验证下外边距是否是所有东西都有距离感，如图操作给body标记添加文字，或者添加图片看效果，如图所示得知验证是正确的。注意：本教程以上所说比喻并不是绝对的，如此肯定的说只是方便学习。如果以后遇到不同情况，推翻以上所说即可。
6、按F12可以查看一个标记的所有属性，把鼠标停留在div标记上，从上面可以得知div标记宽高142像素，用下方的界面可以清楚的看到一个标记内外边距、边框等信息。如图一个标记在网页上的可视化宽度142像素=内容宽度100像素+左右内边距40，左右边框2。
7、当标记越来越多时，有一个很苦恼的问题，当瘫蝠熨夯我们设置一个标记宽高时，页面上显示的是：设置的宽高+边框距离敫苻匈酃+内边距，我们还要扣减边框距离、内边距、计算实际的宽度。那为什么要扣减呢，因为排版需要，本来网页排放的好好，突然临时要增加内边距，那么内边距就会使标记宽度发生变化，网页摆放就不整齐了，所以扣减内边距等，重新设置宽高使摆放整齐。哪有没有什么功能，不去计算，一次搞定呢？有的，首先给div标记添加内边距，然后按F12查看内容宽高+边距等，如图操作都是内容宽高100像素。请看下一步解决方法
8、box-sizing的默认属性值为，content-box。当box-sizing属性值设置为border-box，即可在网页中按width和height设置的属性值，显示宽高。按F12我们可以看到本来内容宽高是100像素，变成了自动扣减数值。设置border-box后，多次修改内边距，网页显示实际宽高都是不变，而内容宽度在改变，所以这个box-sizing属性使排版整齐，不用计算。
