使用CSS样式的水平线

Question

我在<h1>水平线上方有一段文字。除非我将margin-left: -4px应用于<h1>，否则文字不会与规则完全一致。这对我来说似乎有些苛刻。排列它们的正确方法是什么？

例如，文本是右边的几个像素（添加了虚线以突出显示文本和规则没有排列）：

水平线从0开始，而TEST从4Px开始。

代码：

<h1 style="margin-left: -4px">TEST</h1> (without the -4 they do not line up)
<hr class="styledHorizontalRule" />

.styledHorizontalRule {
    height: 1px;
    width: 320px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 0px;

    background-color:blue;

    border: none;
    outline: none;
}

Answer 1

据我所知，这是一个保证金/填充问题。我没有看到在给定的例子中复制的问题，但试试这个：

＆＃13;

＆＃13;

h1 { margin: 0px; padding: 0px; }

.styledHorizontalRule {
    height: 1px;
    width: 320px;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 0px;

    background-color: blue;

    border: none;
    outline: none;
}

＆＃13;

<h1>TEST</h1>
<hr class="styledHorizontalRule" />

＆＃13;

＆＃13;

＆＃13;