Question

这是我的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;
}

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

enter image description here

但如果删除<!DOCTYPE html>标记，则会删除两行之间的“空白” enter image description here

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

Answer 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来自：

<!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

Answer 2

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

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

Answer 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;
}

这就是它，除了所有那些空白问题之外，还有乐趣。

Answer 4

使用line-height: 0px;

<强> WORKING DEMO

CSS代码：

div{line-height:0;}

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

Answer 5

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

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

Answer 6

您可以在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/

Answer 7

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

Answer 8

使用<br/>创建一个新行，从一开始就是一个糟糕的解决方案。使容器＃div1的宽度等于3个子div。我认为<br/>不应该用在段落之外的其他地方。

Answer 9

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

display:inline-flex

Before Adding dislay:inline-flex;

After Adding display:inline-flex; in css

删除div元素之间的“空格”

9 个答案:

此问题的来源