Question

这是代码..

 <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

如果我理解了这个问题，请在padding上删除body。

jsFiddle

body {
    margin:0;
}

您可能还会发现box-sizing:border-box有用，它将border和padding整合到width和height

jsFiddle

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

修改

RE：不..我想删除div id＆＃34; xxx1＆＃34;中的空格。

嗯，你可以通过各种方式做到这一点，正确的方式将取决于上下文是什么。这是一对夫妇：

使用position:absolute定位.xxx1，以便将其从页面流中取出。 jsFiddle
设置height:0px并在向其添加内容时使用JavaScript进行设置。

Answer 2

这里尝试像这样改变它

.xxx1{
border:1px solid green;
height:auto;
position:relative;

}

Answer 3

你不能删除通过相对定位添加的间距。设置身体上的填充和边距不会这样做。设置盒子大小不会这样做。将字体大小设置为0不会这样做。用javascript做点什么只是愚蠢。

您有以下选择：

使下一个项目有一个负余量（ick）。
浮动项目，这不会允许重叠（如果你需要）
将外部div设置为相对位置和要移动到绝对位置的项目（并设置顶部（或底部）和左侧（或右侧）值。这将根据您要移动的项目进行定位到它的外部div（不是窗口）。

3号几乎总是最好的方式。考虑一下页面将如何随可变内容而变化，以确保您选择正确的选项（并更正要定位的角落）。

如果您设置为相对位置的外部div未在空间中调整（使用上/下/左/右），则该div不会有任何额外的不需要的空间。如果需要调整外部div和内部div，请将所有移动div设置为绝对，将最接近的父设置为相对;运动（上/下/右/左）将基于相对父母。

如何防止div与位置：相对于分配额外的空间

3 个答案:

修改