0

わかりました、私はこれに完全に困惑しています。タグ内のテキストにより、要素をit's in内<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>次のようにマージンを追加してセクションの周りに要素を移動しようとすると、背景を 4em 下に移動します.payroll h1 {。

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

上記のコードは、背景をまったく移動しません。

タグを使用して<p>も、マージンを使用して要素を移動しようとするまで、背景は移動しません。タグを使用する<h1>と、背景がすぐに下がります。

繰り返しますが、私はここで完全に困惑しています。デモンストレーション用の写真も追加しました。

ここに画像の説明を入力

そして、margin プロパティが<h1>タグに追加された別の画像。

ここに画像の説明を入力

4

2 に答える 2

1

.payroll または .pos "overflow: hidden;" を指定してみてください。

于 2013-01-03T00:03:23.857 に答える
0

h tage float を左に与えてから、clear div を追加します

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

HTML:

<h1>
            Payroll
        </h1>
<div style="clear:both"></div>
于 2013-01-03T00:07:40.737 に答える