今天我们接着分享关于盒子模型的内容。
边框border：
前面的章节，我们已经深入学习了边框的属性。这里就再次强调一下，对于border属性，在实际开发中，我们更习惯使用简介写法。
语法：
border: 像素值 边框类型 颜色值；
示例代码：
<html><head><title>边框</title><style type="text/css">#main {width:300px;height:150px;border: 2px dashed gray;}</style></head><body><div id="main"></div></body></html>
内边距padding：
内边距padding，又常常被称为补白，指的是内容区到边框之间的那一部分。
从CSS盒子模型中，我们可以看出，内边距padding分为4个方向：
padding-top，顶部，
padding-bottom，底部，
padding-left，左侧，
padding-right，右侧，
语法：
padding-top:像素值；padding-bottom:像素值；padding-left:像素值；padding-right:像素值；
示例代码：
<html><head><title>内边距</title><style type="text/css">#outer {display:inline-block;border: 1px solid #cccccc;}#inner {display:inline-block;padding-top:30px;padding-right:60px;padding-bottom:30px;padding-left:120px;margin:50px;border: 1px solid red;background-color:#fce9b8;}span {border: 1px solid blue;background-color: #c5fcdf;}</style></head><body><div id="outer"><div id="inner"><span>虾米大王</span></div></div></body></html>
预览浏览器效果，可以看见，inner与outer之间有50像素的空白区域，这就是inner的外边距撑起来的，然后inner的内部边距，上下相同，左侧是右侧的2倍，所以我们看到span内容区靠右侧显示。
padding简洁写法：
在实际开发中，我们一般使用padding的简洁写法，设置属性，这样更加高效。
padding简洁写法分为三种，
1、padding: 20px；，这样表示4个方向的内边距都是相等的，均是20像素；
2、padding: 20px 40px; ，这样表示上下相同，左右相同，即padding-top,padding-bottom，20px，而padding-left，padding-right，40px；
3、padding: 10px 20px 30px 40px;，这样表示上右下左，即padding-top=10px，padding-right=20px，padding-bottom=30px，padding-left=40px，这个顺序是固定，不能随便写，如果觉得记不住，就在脑中默念，顺时针，上右下左。
语法：
padding: 像素值；padding: 像素值上下 像素值左右；padding: 像素值上 像素值右 像素值下 像素值左；
示例代码：
<html><head><title>简洁写法</title><style type="text/css">#outer {display:inline-block;border: 1px solid #cccccc;}#inner {display:inline-block;padding: 40px 80px 40px 80px;margin: 60px;border: 1px solid red;background-color: #fce9b8;}span {border: 1px solid blue;background-color: #c5fcdf;}</style></head><body><div id="outer"><div id="inner"><span>虾米大王</span></div></div></body></html>
外边距margin:
外边距margin，指的是边框到父元素或者同级元素之间的那一部分。
从CSS盒子模型中，我们可以看出，外边距也分为4个方向：margin-top，margin-right，margin-bottom，margin-left。这一点与内边距非常相似。
语法：
margin-top:像素值；margin-bottom：像素值；margin-left：像素值；margin-right：像素值；
示例代码：
<html><head><title>外边距</title><style type="text/css">#outer {display:inline-block;border: 1px solid black;}#inner {display:inline-block;margin-top: 20px;margin-right:40px;margin-bottom: 20px;margin-left: 80px;border: 1px solid red;background-color:#fce9b8;}</style></head><body><div id="outer"><div id="inner">虾米大王</div></div></body></html>
简洁写法：
margin跟padding一样，也有简洁写法。在实际开发中，我们通常使用margin的简洁写法，这样高效。
margin简洁写法有三种，分别是,
1、margin：30px；，表示4个方向的外边距均是30px；
2、margin：30px 60px；，表示上下是30px，即margin-top，marginbottom，30px，左右相同，即margin-left，margin-right，60px；
3、margin：10px 20px 30px 40px，表示margin-top=10px，margin-right：20px，margin-bottom：30px，margin-left：40px，顺序依然是顺时针方向，上右下左。
语法：
margin: 像素值；margin: 像素值上下 像素值左右；margin：像素值上 像素值右 像素值下 像素值左；
示例代码：
<html><head><title>外边距</title><style type="text/css">#outer {display:inline-block;border: 1px solid black;}#inner {display: inline-block;margin: 30px 60px 30px 60px;border: 1px solid red;background-color: #fce9b8;}</style></head><body><div id="outer"><div id="inner">虾米大王</div></div></body></html>
CSS盒子模型这节内容，很重要，因为使用css样式布局时，很多方面都需要理解盒子模型后，才能顺利的进行布局设置，不然页面效果始终不能按照你的意图展示，调试会很累，很麻烦的。希望初学者能够多加练习，理解盒子模型的概念和用法。
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
