css - 如何让DIV吸收空间

Question

我有一个相当琐碎的任务。3 个具有不同背景的 DIV：第一个 - 顶部附件，第二个 - 底部附件，第三个 - 重复背景。当我将内容留在这 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 重置line-height:0px为 parent 和line-height:normalchild 好吧！