您当前的位置: 首页 » DIV+CSS编程 » CSS初级教程 边界margin和补白padding
CSS初级教程 边界margin和补白padding
论坛链接
边界margin和补白padding（依据国内出版社的翻译惯例，margin被翻译成边界，padding被翻译成补白，译者依照习惯翻译。但译者认为，margin翻译成外边距，padding翻译成内边距更为直白和形象。你可以依据自己的习惯来适应这两种不同的译法。——译者注）是隔开元素最常用的两个属性。边界是元素外边的距离，而补白则是元素内部的距离。
为h2改进代码如下：
h2 {
font-size:14px;
background-color: #ccc;
margin: 10px;
padding: 30px;
}
你可以看到二级标题外围有一个10px的宽度，还很臃肿，因为在二级标题内部有30px宽度的补白。
元素的四边可以设置不同的值。 margin-top、 margin-right、margin-bottom、 margin-left、padding-top、padding- right、padding-bottom和padding-left是无需解释的属性（看看英文字面意思啦）。
margin和padding通常写法
margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;
可简写为
margin:1px 2px 3px 4px
按照 上 右 下 左 的排列顺序
若上右下左的距离都相同，比如
margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;
可简写为
margin:10px
若上下相同，左右相同，比如
margin-top:10px;margin-right:20px;margin-bottom:10px;margin-left:20px;
可简写为
margin:10px 20px;
前面的是上下，后面的是左右
padding的常用写法和margin类似
为h2改进代码如下：
h2 {
font-size:14px;
background-color: #ccc;
margin: 10px;
padding: 30px;
}
你可以看到二级标题外围有一个10px的宽度，还很臃肿，因为在二级标题内部有30px宽度的补白。
元素的四边可以设置不同的值。 margin-top、 margin-right、margin-bottom、 margin-left、padding-top、padding- right、padding-bottom和padding-left是无需解释的属性（看看英文字面意思啦）。
margin和padding通常写法
margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;
可简写为
margin:1px 2px 3px 4px
按照 上 右 下 左 的排列顺序
若上右下左的距离都相同，比如
margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;
可简写为
margin:10px
若上下相同，左右相同，比如
margin-top:10px;margin-right:20px;margin-bottom:10px;margin-left:20px;
可简写为
margin:10px 20px;
前面的是上下，后面的是左右
padding的常用写法和margin类似