css - DIV吸収空間の作り方

Question

私はかなり些細な仕事をしています。背景が異なる 3 つの DIV: 1 番目 - 上部の付録、2 番目 - 下部の付録、3 番目 - 背景の繰り返し。この 3 つのラッパー内にコンテンツを残すと、負のマージンを使用して削除できない上部と下部のスペーサーがあります。さて、CSSは次のとおりです。

.cBlock {
    background: url('top.png') no-repeat center top;
    padding-top: 16px;
}

.cBlock .inner1 {
    background: url('bottom.png') no-repeat center bottom;
    padding-bottom: 130px;
}

.cBlock .inner2 {
    background: url('bg.png') repeat-y center;
    min-height: 250px;
}

.cBlock .inner3 {
    margin-bottom: -130px;
}

HTML は次のとおりです。

    <div class="cBlock"><div class="inner1"><div class="inner2"><div class="inner3">
        123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
    </div></div></div></div>

そして結果は

Answer 1

最初と最後のをすぐに閉じる必要がありますDIV。

<div class="cBlock">

    <div class="top"></div>

    <div class="content">
        123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
    </div>

    <div class="bottom"></div>
</div>

これで、これらの要素を直接配置することも（position）、またはパディングと負のマージンを使用することもできます。

これは、CSSで実現できることでもあります。

<div class="content">
    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
</div>

/* styling */
.content:before {}
.content {}
.content:after {}

Answer 2

行の高さline-height:0pxを親とline-height:normal子にリセットします よし！