精确安置空白

作者：整理

精确安置空白

在引入Cascading Style Sheet之前，要想控制一个网页中的空白是非常困难的。使用下面的四个属性：margin-left、margin-top、margin-right和margin-bottom，一切就会变得很容易。表7.6显示的例子说明了怎样使用这四个属性（见图7.34）：

表7.6 控制文本空白

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Thin {margin-left: 50pt; margin-right: 50pt}

.VeryThin {margin-left: 100pt; margin-right: 100pt}

-->

</STYLE>

</HEAD>

<BODY>

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

</P>

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

Very Thin. Very Thin. Very Thin. Very Thin. Very Thin.

Very Thin. Very Thin.

</P>

</BODY>

</HTML>

图7.34 使用不同的空白

不需要一个个地指定空白值，你可以使用margin属性来一次设定所有的空白值。当你使用margin属性时，你需要依照top、right、bottom和left的次序给出它们的值。如果你只提供了一个值，则它会提供给所有的四个属性。如果你只提供了两个或三个值，其余的值会从相对的位置去获得。下面的例子说明了怎样使用这个属性：

<HTML>

<HEAD>
<TITLE> Style </TITLE>

<STYLE>

<!--

.Thin {margin: 50pt}

-->

</STYLE>

</HEAD>

<BODY>

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin. Thin. Thin. Thin.

Thin. Thin. Thin. Thin. Thin.

</P>

</BODY>

</HTML>

返回顶部

下一篇：在网页中加入Style >>