课程导读 | ＃005＃前端开发 - HTML5和CSS（五）

freeCodeCamp · 公众号 · · 2017-07-21 16:50

正文

41 Adjust the Margin of an Element

调整元素的边距

元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。

.green-box {
background-color: green;
padding: 20px;
margin: 20px;
}

42 Add a Negative Margin to an Element

向元素添加负余量

元素的 margin 控制元素的 border 和元素实际所占空间的距离。

如果你将一个元素的 margin 设置为负值，元素将会变大。

43 Add Different Padding to Each Side of an Element

使元素每一个边具有不同的 padding

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding。

.green-box {
background-color: green;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

44 Add Different Margins to Each Side of an Element

在元素的每一边添加不同的边距

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。

45 Use Clockwise Notation to Specify the Padding of an Element

使用顺时针符号来指定元素的填充

除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px;

这四个值的工作方式类似于时钟：顶部，右侧，底部，左侧，并将产生与使用侧面特定填充指令完全相同的结果。

.green-box {
background-color: green;
padding: 40px 20px 20px 40px}

46 Use Clockwise Notation to Specify the Margin of an Element

使用顺时针方向指定元素的边距

除了分别指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：

margin: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

.green-box {
background-color: green;
margin: 40px 20px 20px 40px;}

47 Style the HTML Body Element

设计HTML体元素

每一个 HTML 页面都有一个 body 元素。

48 Inherit Styles from the Body Element

从body元素继承样式

你可以像对其他 HTML 元素一样对你的 body 元素应用样式，并且所有其他元素将继承你的 body 元素的样式。