css - 如何防止div位置为:relative to allocate extra space

Question

Here is jsfiddle example

这是代码..

 <div id="xxx1"> 
     <div class="xxx1">
            txt
    </div> </div>

和CSS

#xxx1{
    border:1px solid black;
    min-height:25px;

}
.xxx1{
    border:1px solid green;
    height:50px;
    position:relative;
    top:-50px;
}

我想从 div id“xxx1”中删除多余的空间。怎么做？而且我不能使用固定高度，因为如果我想在该 div 内添加更多数据，我希望该 div 增加其高度。

Here is jsfiddle example

Answer 1

如果我理解了问题，请去掉 body 上的 padding。

jsFiddle

body {
    margin:0;
}

您可能还会发现 box-sizing:border-box 很有用，它将 border 和 padding 集成到 width 中和高度

jsFiddle

#xxx1{
    box-sizing: border-box;
}
.xxx1{
    box-sizing: border-box;
}

编辑

回复:不..我想删除 div id“xxx1”内的空格。

你可以通过多种方式做到这一点，正确的方式取决于上下文。这里有一些:

• 使用 position:absolute 定位 .xxx1，以便将其从页面流程中删除。 jsFiddle

• 设置 height:0px 并在向其添加内容时使用 JavaScript 进行设置。