Question

我在HTML页面中使用了HR标签。但水平线并未沿X轴覆盖整个页面。左右两侧都有间隙。我怎样才能填补这个空白呢？

例如，下面是一个示例代码 -

<html>
   <hr>
</html>

Answer 1

您可以执行以下操作 - ＆gt; demo

我还有两个选项 - 使用水平线或带顶部或底部边框的div。

您有空格或间隙的原因是浏览器具有不同的预设设置 - 因此您需要将边距和填充设置为零。看看演示。

CSS

* {
    margin:0;
    padding:0;
}
hr {
    margin-top: 30px;
    /*so you can see it in demo */
    width: 100%
}
.demo {
    position: relative; /*so I could use 'top: 30px' */
    top: 30px;
    /*so you can see it in demo*/
    width: 100%;
    border-top:1px solid black;
}

HTML

<hr/>
<div class="demo"></div>

编辑：正如Ojdo评论的那样，您可以在使用类似Meyer's Reset之类的项目进行项目之前重置，或者您可以使其与“跨浏览器”兼容并使用来自Necolas的normalize.css - 这基本上尝试使您的默认css在多个浏览器中看起来一致。选择最终取决于您。从头开始或从一些有点一致的东西开始。

Answer 2

这是因为身体的边缘。试试这个：

<html>
    <body style="margin:0;">
    <hr>
    </body>
</html>

Answer 3

把这个css放在hr：

hr {
  margin-left: -8px;
  margin-right: -8px;
}

这是因为总有自动保证金

这是一个小提琴的例子：

http://jsfiddle.net/ha97t/

Answer 4

间隙是由body元素的默认边距8px引起的（这是一个常见的浏览器默认值，在CSS 2.1和HTML5 CR中都有描述）。

您可以简单地覆盖body的水平边距：

body { margin-left: 0; margin-right: 0 }

可以使用更广泛的覆盖，例如“CSS重置”，但它们可能会以多种方式影响您的页面布局，并且除了简单地覆盖body的特定属性之外，无助于解决此问题

但是，删除这些边距意味着文本将从左边缘到右边缘运行，通常会使字母触及边缘。因此，如果您希望横向规则在页面上扩展而不影响任何内容，请在其上设置负边距。然后最好明确设置body边距（以防止浏览器根据惯例不实现它们）：

body { margin: 8px }
hr { margin-left: -8px; margin-right: 8px }

HR标签覆盖整个页面？

4 个答案: