1

在我的代码中，在以下 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 链接。

注意：所有元素的边距、边框和内边距均为 0

4

5 回答 5

5

删除 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 示例或jsFiddle 示例（使用 HTML 注释）

于 2013-05-09T14:09:54.063 回答
1

以上所有答案都是正确的，您在 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 方法。

我从 CSS Tricks 中检索信息。你可以在那里获得更多信息。希望这可以帮助！

于 2013-05-09T14:28:07.947 回答
0

你想摆脱空间吗？

添加float: left到您的 div 中。

于 2013-05-09T14:13:58.513 回答
0

我知道这很奇怪，但是在 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>
于 2013-05-09T14:10:12.630 回答
0

有一个空间...

<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>
于 2013-05-09T14:10:24.167 回答