第十课:Margin与padding

前一课介绍了box模式。本课将教给你怎样通过设置margin和padding改变元素输出结果。

设定元素的margin

元素有四个边,即右,左,上和下。边缘(margin)是指每一侧与邻近元素之间的距离。可以查看第九课的图例。在第一个例子中,我们将学习怎样为元素自身的文件定义边缘
CSS代码图片
实现这一效果的CSS代码是:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

或采用更简洁的方式:

body {
margin: 100px 40px 10px 70px;
}

可以以这种方式给任何元素设定边缘。例如,我们可以定义标记为<p>的所有文本段落:

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}

设定元素的padding

可以把padding理解为“填充物”。这意味着padding不会影响元素与其它元素之间的距离,只定义border与元素内容之间的内部距离。可以通过下面实例弄清楚padding的用法:

h1 {
background: yellow;
}

h2 {
background: orange;
}

通过定义标题的padding,可以改变围绕每个标题文字的填充数量:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

总结

你已经掌握了CSS调整box箱型的基本方法。下一课将进一步学习怎样设定borders的颜色,以及元素的形状。