CSS/tutorials/lesson10

2010年10月16日 (六) 11:48的版本

上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置margin（外边距）和padding（内边距）这两个CSS属性来改变元素的显示。

一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可以参考第9课的图示。

在下面这个例子中，我们将了解如何为文档本身（即body元素）定义外边距。下图显示了我们对外边距的要求。

满足上述要求的CSS代码如下：

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

或者你也可以采用一种较优雅的缩写形式：

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

<discussion>characters_max=300</discussion>

@@ 第7行： / 第7行： @@
 ==为元素设置外边距==
+一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可以参考[[CSS/tutorials/lesson9|第9课]]的图示。
+在下面这个例子中，我们将了解如何为文档本身（即body元素）定义外边距。下图显示了我们对外边距的要求。
+[[Image:css-tutorials-11.gif]]
+满足上述要求的CSS代码如下：
+ body {
+  margin-top:100px;
+  margin-right:40px;
+  margin-bottom:10px;
+  margin-left:70px;
+ }
+或者你也可以采用一种较优雅的缩写形式：
+ body {
+  margin: 100px 40px 10px 70px;
+ }
 ==为元素设置内边距==