<h1>元素用它们拖动背景</h1>

Question

好的，我完全被这个困扰了。 <h1>代码中的文字会导致背景在尝试将<h1>元素放置在其中的<section>内时移动。<p>标记不会导致此问题

我在<section>代码中有背景图片，如下所示：

.payroll {
        background-image: url('../img/payroll_bg.jpg');
        background-repeat: repeat-x;
        height: 567px;
    }

    .payroll h1 {
        color: #193441;
        text-align: left;
    }

    .pos {
        background-image: url('../img/pos_bg.jpg');
        background-repeat: repeat-x;
        height: 632px;

    }

我的h1在CSS中定义如下：

h1 {
    font-family: "Helvetica-light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 230%;
    color: #fcfff5;
    text-align: center;
}

我的HTML看起来像这样：

<section class="payroll">
        <h1>
            Payroll
        </h1>
</section><!-- END class="payroll"-->   

<section class="pos">
    <p>
        This is the pos Costing Section
    </p>

</section><!-- END class="pos" -->

如果我尝试通过向<h1>添加边距来移动.payroll h1 {元素，我将背景向下移动4em：

.payroll h1 {
        color: #193441;
        text-align: left;
            margin: 4em 0 0 2em 
    }

以上代码根本不会移动背景。

在尝试使用边距移动元素之前，使用<p>标记不会导致背景移动。使用<h1>标记会导致背景立即崩溃。

再次，我完全被这里难住了。我还添加了图片来演示。

将另一张带有margin属性的图片添加到<h1>标记。

Answer 1

尝试给.payroll或.pos“overflow：hidden;”。

Answer 2

向左移动h tage 然后添加明确的div

.payroll h1 {
        color: #193441;
        text-align: left;
        margin: 4em 0 0 2em ;
        float:left
    }

HTML：

<h1>
            Payroll
        </h1>
<div style="clear:both"></div>