---《网猴》版权所有
我们都知道可以用HTML设定边距，但你必须使用表格，别无它法。而样式表则......
快速定义边距
首先，我们应该了解样式表语言的术语，便我们理解正在谈什么。每一个整块的要素或替代要素都包含在样式表生成器称为box的容器之内。 box包括：
* 要素本身
* 围绕要素的空格填充（padding）
* 围绕空格填充的边框（border）
* 围绕边框的边距（空白－margin）
你可以分别控制空格填充、边框和边距，如我们即将做的。
顶边距、底边距、左边距和右边距
这4项属性可以使你控制一个要素的四周的边距。如下：
H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }
你可以看到，每一个边距都可以有不同的置。或者你可以设置一个边距，然后让览器用缺省设置设定其它的几个边距。可以将边距应用于文字和替代要素（如象）。
设定边距参数值最明显的方法是利用长度位：px(象素）、pt（点数）等。你也可以用比例值设定边距。
将边距值设为负值，你就可以将两个要素叠在一起，例：
Books
are mind food
上例中， "are mind food" 的底边距为－55象素，右边距为60象素。
使用负值使要素重叠的的缺陷是不同的浏器对其处理方式不同。比如，在显示上例子时，不同的4种主要浏览器（Communicator for PC, Communicator for Mac, IE for PC, IE for Mac）对文字重叠的程度不同。
另一个缺陷是你不能完全控制位于底部的内容，而且不同的浏览器对其显示也不同。例如， Communicator总是将图象显示在文字的上部。 IE似乎是将个要素按照其载入浏览器窗口的顺序显示各要素。
换句话说，如果你打算将几个要素叠放在一起，就不要对边距使用负值。今天的教程将教你如何叠放个要素。
浏览器对该属性的支持方面还应注意以下几点：
* 当你在IE 3中使用标尺单位 (如英寸和厘米）时，IE 3有时会加大底边距。同样，有些HTML标签可以适用
底边距，有些则不能，
* IE 4有时在对替代要素（如图象）设定左边距时会出现问题，你可以将图象包在一个<DIV>中，然后给<DIV>设定样式。
顶空格填充，底空格填充，左空格填充和
右空格填充
空格填充的作用类似于边距控制，你可以设定一个要素的前后左右的空格填充的尺寸。
H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }
你可以使用任何一种长度单位或比例值设定空格填充。其使用方法同边距的属性。
但是空格填充不能使用负值（而且，IE 3不支持空格填充属性）。
下面我们将探讨位于边距和空格填充之间的边框。
有几种样式表属性可以将网页要素周围加上s2es@#边框。
（注意：IE 3和IE 4不支持任何边框属性。）
顶边框宽度，底边框宽度，左边框宽度和右边框宽度
你可以控制整个边框的宽度，也可以分别控制每一边的边框宽度：
H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }
以下是上述CSS规则的显示结果：
你还可以给替代要素加上边框，很好玩，是吧？
你无须给一个要素的每一边都加上边框。
你可以使用上述任何一种长度单位设定边框宽度，也可以使用内置关键字设定宽度：
本段文字的顶边框宽度参数值为thin。
本段文字的顶边框宽度参数值为medium。
本段文字的顶边框宽度参数值为thick。
如果你想使边框四面应用相同的宽度，很简单，使用border-width标签就可一次完成，例：
IMG { border-width: 1in }
边框颜色
例：
P { border-color: green; border-width: 3px }
本段文字显示上述代码的执行效果。
你可以使用浏览器认可的颜色或者直接使用RGB参数值，例：
H4 { border-color: #FF0033; border-width: thick }
如果你想使边框的四边显示不同的颜色，你可以在设置中分别列出各种颜色：
P { border-color: #666699 #FF0033 #000000 #FFFF99; border-width: 3px }
浏览器将第1种颜色理解为顶边框的颜色参数值，第2种颜色为右边框，然后是底边框，然后是左边框。
本段文字显示上述代码的执行效果。
注意： Communicator 不能识别多色彩，在Communicator中，你只能使用一种颜色。（如果你使用多色彩，Communicator很有可能用蓝色显示整个边框。我们也对此感到莫名其妙）
如果不使用边框颜色属性，则边框将以要素自身的颜色显示边框颜色。
边框样式
你还可以设定边框线的样式，例：
P { border-style: double; border-width: 3px }
可以使用的关键字参数值如下：
* solid
* double
* dotted
* dashed
* groove
* ridge
* inset
* outset
注意：Communiactor只支持其中的几种关键字属性。
我们在网页中经常看到浮动的图象和表格，只需对一个<IMG>标签使用ALIGN=left属性，文字就会绕到浮动图象的右边继续显示。样式表对于浮动要素有一个更为灵活的语法，也就是本篇中将要谈到的主题。
（IE3和IE 4不支持本页中谈到的任何功能。如果你使用IE 4，你将会看到一些奇怪的格式。）
浮动
浮动属性使你能将一个要素周围用文字包裹，不仅仅是包裹图象，而且能包裹整块的文字。
H4 { float: left }
本标题文字为向左浮动。
你可以看到这项CSS规则应用于<H4>的文字。而本段内容则包裹在标题文字的右下边，就象是用文字包裹图象时的效果那样。你也可以使用向右浮动的参数值。
如果浮动要素周围的边距太小，你可以使用之前学过的空格填充属性给它加大四周的空间（但似乎使用边距会造成问题）。
清除
如果你想使一段文字包裹某一要素，而下一段文字不包裹，你可以使用clear属性，很象HTML的CLEAR属性的用法（例： CLEAR=right）。
P { clear: left }
例：
第1、2段文字包裹了向左浮动的第1幅图象。
而使用了清除（clear）属性后，第4、5段文字中只有第4段包裹了图象，而第5段文字没有包裹。
小问题：如何只使用CSS和HTML而无须gif就制造出下落阴影的效果？答案见明天的课程。
今天是个好天气。我们扩展了串接样式表等方面的学习，将文字和图象都置于我们的自由控制之下。它使我们可以做到普通的HTML标签不能做到的事情。
以下是我们今天学习内容的总结：
* 字间距设定字与字之间的距离。
* 字母间距设定每个字母之间的距离。
* 行高设定每行文字之间的垂直距离。
* 文字对齐用于设定段落的左、右对齐、居中和左右两边对齐。
* 垂直对齐用于垂直对齐文字。
* 文字缩行可以使段落缩行。
* 各种边距属性设定围绕文字块、图等的边距。
* 空格填充属性用于设定空格填充的性。
* 边框属性用于设定边框的宽度、颜和样式。
* 浮动和清除用于控制各要素之间的包裹。
明天我们将继续探索串接样式表的神奇魅力。
