删除 div 元素之间的“空白”答案

【问题标题】：Remove "whitespace" between div element删除 div 元素之间的“空白”
【发布时间】：2013-08-29 10:26:41
【问题描述】：

这是我的 HTML 代码

<div id="div1">
    <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

我的 CSS：

#div1 {
    width:150px;height:100px;white-space:nowrap;
    border:blue 1px solid;padding:5px;
}
#div1 div {
    width:30px;height:30px;
    border:blue 1px solid;
    display:inline-block;
    *display:inline;zoom:1;
    margin:0px;outline:none;
}

如果我在<html> 标签之前插入<!DOCTYPE html>，页面将如下所示：

但如果我删除<!DOCTYPE html> 标签，两行之间的“空白”将被删除

但我想使用<!DOCTYPE html> 标签，这是推荐的，但我找不到任何可以删除该空格的 CSS 规则，我使用了 margin:0;outline:none;等等......但它不起作用，任何人都可以帮助我。谢谢！（我英语不好……）

【问题讨论】：

如果在标签前插入what？
尝试在 #div1 上设置一个 30px 的 line-height。

标签： css html whitespace margin

【解决方案1】：

解决此问题的最简单方法是将 vertical-align: top 属性应用于您的 CSS 规则：

#div1 div {
   width:30px;height:30px;
   border:blue 1px solid;
   display:inline-block;
   *display:inline;zoom:1;
   margin:0px;outline:none;
   vertical-align: top;
}

如果您要向div 添加内容，那么使用line-height: 0 或font-size: 0 会导致文本布局出现问题。

见小提琴：http://jsfiddle.net/audetwebdesign/eJqaZ/

这个问题从何而来

当浏览器处于“怪癖”模式时，可能会出现此问题。在这个例子中，改变文档类型来自：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

到

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

将改变浏览器处理多余空格的方式。

在 quirks 模式下，空格会被忽略，但在严格模式下会保留。

参考资料：

html doctype adds whitespace?

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

【讨论】：

如果内部div的高度不规则，你有什么解决办法吗？
@Dimple 如果 div 的高度不同，那么您将看到完全不同类型的问题。该解决方案涉及使用称为 Masonry 的 jQuery 插件：masonry.desandro.com 如果您在 StackOverflow 上搜索“masonry jquery”，您会发现这是一个常见问题，这就是有人创建该插件的原因。希望这会有所帮助！
我有什么纯css解决方案吗？
这个 display:inline-block 没有帮助删除空间，你可以使用 display:inline-flex

【解决方案2】：

将line-height: 0px; 添加到您的父 div

jsfiddle：http://jsfiddle.net/majZt/

【讨论】：

【解决方案3】：

你需要这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<-- I absolutely don't know why, but go ahead, and add this code snippet to your CSS -->

*{
    margin:0;
    padding:0;
}

就是这样，尽情享受消除所有这些空白问题的乐趣吧。

【讨论】：

这帮助我解决了页面正文上两个 div 之间的问题，添加那一点 CSS 为我删除了空白，谢谢

【解决方案4】：

使用line-height: 0px;

WORKING DEMO

CSS 代码：

div{line-height:0;}

这将普遍影响您的所有 Div。如果您只希望现有的父 div 没有间距，您可以将其应用到其中。

【讨论】：

【解决方案5】：

您可以在 div1 上使用 line-height，如下所示：

<div id="div1" style="line-height:0px;">
    <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

看到这个：http://jsfiddle.net/wCpU8/

【讨论】：

【解决方案6】：

虽然可能不是您可以添加的最佳方法：

#div1 {
    ...
    font-size:0;
}

【讨论】：

如果在任何子元素中添加文本会发生什么？
好吧，不清楚这些 div 里面是什么 - 但你可以随时重置它。

【解决方案7】：

您可以通过在父（容器）div 元素中使用 CSS 的以下属性来删除 DIv 内的额外空间

display:inline-flex

Before Adding dislay:inline-flex;

After Adding display:inline-flex; in css

【讨论】：

【解决方案8】：

HTML

<div id="div1">
        <div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>

CSS

#div1 {
    width:150px;height:100px;white-space:nowrap;
    line-height: 0px;
    border:blue 1px solid;padding:5px;
}
#div1 div {
    width:30px;height:30px;
    border:blue 1px solid;
    display:inline-block;
    *display:inline;zoom:1;
    margin:0px;outline:none;
}

DEMO

【讨论】：

【解决方案9】：

使用<br/> 创建新行从一开始就是一个糟糕的解决方案。使您的容器 #div1 的宽度等于 3 个子 div。 <br/> 在我看来不应该用在段落以外的地方。

【讨论】：

这取决于 OP 还想对父容器做什么，也许背景图像会填充其余的空间。在这种情况下，我不会因为硬编码换行符而责备任何人。