Site sections

设计 <hr> 元素

Russ Weakley
23-Nov-02

<hr> 元素 自我关闭的标签, 这意味着它没有结束标签。这让浏览器显示出一条水平线。在水平线和包围它的内容之间插入的垂直距离的大小取决于浏览器。

那么，如果你想去掉在某些浏览器中<hr>元素的的默认阴影，该怎么办呢？定义<hr>的样式，使它能够工作于所有现代的浏览器，这有可能性么？

答案在 css-discuss: "Internet Explorer使用“color”属性，这个属性是不正确的。“color”属性能正确的应用于前景文本颜色，而不是背景颜色。然而，Mozilla (Netscape) and Opera使用background-color属性。在诸如Opera and Mozilla的浏览器中，你可能仍然能看到HR元素的边，这可能不是你想要的。如果你想去掉这个边，将border设置为0。

hr
{
color: red;
background: red;
border: 0;
height: 1px;
}

在 <hr> 元素周围添加空间

你可以使用margins定义 <hr> 的上边距和下边距。举个例子来说，如果你想在元素之前返回单倍距离，在元素之后返回双倍距离，你可以应用如下的声明。

hr
{ color: red;
background: red;
border: 0;
height: 1px;
margin: 1em 0 2em; }

注意到对于margin属性只有3个值。这会在<hr>之上应用1em的距离，左右两边没有margins，元素下面应用2em的距离。

Translations