Question

在我的代码中，在以下html结构中的两个最内部div之间呈现一个奇怪的空间

<body>

    <div class='DatePicker'>
        <div id="dayDiv" class='DayDiv' style='background-color:blue'>
            <div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>

            </div>
            <div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>

            </div>
        </div>
    </div>
</body>

最里面的div被渲染，但它们之间有空格，我想删除它。

以下是JSFiddle link，可以看到带有样式表的页面。

注意：所有元素的边距，边框和填充为0

Answer 1

删除div之间的空白区域，它就会消失

    <div class='DatePicker'>
        <div id="dayDiv" class='DayDiv' style='background-color:blue'>
            <div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>

            </div><div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>

            </div>
        </div>
    </div>

jsFiddle example 或 jsFiddle example （使用HTML评论）

Answer 2

以上所有答案都是正确的，你在div之间有空格，因为你的标记中有一个空格。

您可以通过多种方式对抗此行为：

删除标记中的空格

将结束</div>与下一个<div>

粘在一起

    <div class='DatePicker'>
        <div id="dayDiv" class='DayDiv' style='background-color:blue'>
            <div class="" style='[all your styles]'>
            Your content...</div><div class="" style='[all your styles]'>
            Your content...</div>
        </div>
    </div>

使用负边距

我不建议这样做，因为你真的不知道完全你需要减少多少像素。空间是一个字符宽度。通常，它的数量为3px或4px，但......不确定。

<div class="" style=' /*New style*/ margin-left:-4px; /*End new style*/ display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top;'>

将字体宽度设置为“0”

如果您使用的是em而不是px，则可以避免使用此方法。它可以为您提供子元素和额外标记方面的麻烦。

<div class="" style=' /*New style*/ font-size:0; /*End new style*/ display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top;'>
    <div style="font-size:12px;">Your content...</div>
</div>

浮动div

您可以使用display:inline-block;而不是float:left;。此方法可能需要您使用clearfix method。

我从CSS Tricks中检索信息。你可以得到more info there。希望这有帮助！

Answer 3

我知道这很奇怪，但是如果你在元素之间有空行，它会在HTML中创建一个空格。删除空行以使空间神奇地消失。

<div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>

</div><div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'>

</div>

Answer 4

有一个空间......

<body>
    <div class='DatePicker'>
        <div id="dayDiv" class='DayDiv' style='background-color:blue'>
            <div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'></div>
            <div class="" style='display: inline-block; height:10%;width:10%;background-color:red;vertical-align:top'></div>
        </div>
    </div>
</body>

Answer 5

你想摆脱这个空间吗？

将float: left添加到您的div。

Div之间的空间

5 个答案: