GIF动态图教学-CSS3语言5-盒子模型(实例)

1、padding内边距：文本与边框的距离。首先创建div标记和p标记宽高都设置成100像素。div标记内边距默认为0，如图操作设置为20内边距。如图所示效果，边框与文字的四周距离为20像素，而div标记宽高也变长了。问：怎么形象的理解内边距？答：可以这么理解，【边框】仿佛对【文本】说，你给我听好了，离我四周远点，20像素内的距离是我的地盘。

3、外边距：标记跟自身与之相邻的所有东西的距离。如图可以看到div红色边框和p标记蓝色边框有距离，这是因为p标记默认上边距有16像素。如图操作，设置为0即可。

5、来验证下外边距是否是所有东西都有距离感，如图操作给body标记添加文字，或者添加图片看效果，如图所示得知验证是正确的。注意：本教程以上所说比喻并不是绝对的，如此肯定的说只是方便学习。如果以后遇到不同情况，推翻以上所说即可。

7、当标记越来越多时，有一个很苦恼的问题，当我们设置一个标记宽高时，页面上显示的是：设置的宽高+边框距离敫苻匈酃+内边距，我们还要扣减边框距离、内边距、计算实际的宽度。那为什么要扣减呢，因为排版需要，本来网页排放的好好，突然临时要增加内边距，那么内边距就会使标记宽度发生变化，网页摆放就不整齐了，所以扣减内边距等，重新设置宽高使摆放整齐。哪有没有什么功能，不去计算，一次搞定呢？有的，首先给div标记添加内边距，然后按F12查看内容宽高+边距等，如图操作都是内容宽高100像素。请看下一步解决方法