为什么我的 div 和 Button 之间有间隙
Bra*_*rts 0 html css css-position
有几天我尝试使用 CSS 进行定位和调整大小，但 div 元素和按钮元素之间存在间隙。
主要持有的 div 具有绿色背景，而包含的 div 的持有者具有粉红色背景。
因此，您可以看到充当标签和文本框支架的 div 之间以及充当按钮支架的放置在 div 内的按钮之间存在间隙
我还尝试包含 css 重置但没有成功，我还尝试放置一个全局选择器来重置填充边距和边框
* {
padding:0;
margin : 0
border-width: 0;
}
我真的想知道如何消除这些间隙，以完全控制我的持有者所占用的空间。无论如何，这是我非常简单的代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.interactput {
background-color: green;
}
.interactput div {
display: inline-block;
overflow: hidden;
vertical-align: middle;
background-color: lightpink;
}
.interactput div button {
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div id="AddessEditor" class="interactput">
<div>
<label>This is a label inside a div</label>
</div>
<div>
<input type="text" value="This is input type=text inside a div"/>
</div>
<div>
<button>We are</button>
<button>Three buttons</button>
<button>Inside a div</button>
</div>
</div>
</body>
</html>
最后，如果在这里找到与内联块元素之间的空间作斗争的确切原因。
正如您在有关 css 技巧的建议文章中所读到的那样，具有内联块显示模式的元素之间有一个空格，因为它们之间有空格或换行符，浏览器会将其转换为文本节点。对于我自己来说，建议的解决方案绝对不是易于理解和/或维护的解决方案。
因此，经过几个小时的 google 搜索，正确表述问题的问题是：我发现可以使用 JQuery 轻松消除这些文本节点。答案就在 stackoverflow 上的Solution to remove text node中。因此，让我们使用我提交的代码示例，为我的控制容器创建一个特定的类，我将其命名为“control-container”。
<div id="AddessEditor" class="interactput">
<div class="control-container">
<label>This is a label inside a div</label>
</div>
<div class="control-container">
<input type="text" value="This is input type=text inside a div"/>
</div>
<div class="control-container">
<button>We are</button>
<button>Three buttons</button>
<button>Inside a div</button>
</div>
</div>
之后，我所要做的就是从这些容器中过滤出文本节点，并在文档就绪函数中像这样删除它们......
$(document).ready( function() {
$('.interactput').contents().filter(function () { return this.nodeType === 3; }).remove();
$('.control-container').contents().filter(function () { return this.nodeType === 3; }).remove();
});
魔法！这非常适合我的需要，因为我正在创建一个小部件。希望它能帮助这里的其他人