Html 删除div元素之间的“空白”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18508442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove "whitespace" between div element
提问by phibao37
This is my HTML code
这是我的 HTML 代码
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
My CSS:
我的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;
}
If I insert the <!DOCTYPE html>before the <html>tag, the page will look like this:
如果我<!DOCTYPE html>在<html>标签之前插入，页面将如下所示：
But if I remove the <!DOCTYPE html>tag, the 'whitespace' between the two lines will be remove
但是如果我删除<!DOCTYPE html>标签，两行之间的“空白”将被删除
But I'd like to use <!DOCTYPE html>tag, it's recommend, but I can't find any CSS rule that can remove that whitespace, I have used margin:0;outline:none; etc... but it not work , anyone help me. Thanks!( I'm not good at English ...)
但我想使用<!DOCTYPE html>标签，这是推荐的，但我找不到任何可以删除该空格的 CSS 规则，我使用了 margin:0;outline:none; 等等...但它不起作用，任何人都可以帮助我。谢谢！（我英语不好...）
回答by Marc Audet
The cleanest way to fix this is to apply the vertical-align: topproperty to you CSS rules:
解决此问题的最简洁方法是将该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;
}
If you were to add content to your div's, then using either line-height: 0or font-size: 0would cause problems with your text layout.
如果您要向div's添加内容，则使用line-height: 0或font-size: 0会导致文本布局出现问题。
See fiddle: http://jsfiddle.net/audetwebdesign/eJqaZ/
见小提琴：http: //jsfiddle.net/audetwebdesign/eJqaZ/
Where This Problem Comes From
这个问题来自哪里
This problem can arise when a browser is in "quirks" mode. In this example, changing the doctype from:
当浏览器处于“怪癖”模式时，可能会出现此问题。在这个例子中，改变文档类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
to
到
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
will change how the browser deals with extra whitespace.
将改变浏览器处理额外空白的方式。
In quirks mode, the whitespace is ignored, but preserved in strict mode.
在 quirks 模式下，空格会被忽略，但在严格模式下会保留。
References:
参考：
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
回答by Simon Staton
Add line-height: 0px;to your parent div
添加line-height: 0px;到您的父 div
jsfiddle: http://jsfiddle.net/majZt/
jsfiddle：http: //jsfiddle.net/majZt/
回答by Tauren Mohammed Uddin
You need this
你需要这个
<!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;
}
That's it, have fun removing all those white-spaces problems.
就是这样，消除所有这些空白问题很有趣。
回答by Nitesh
use line-height: 0px;
用 line-height: 0px;
The CSS Code:
CSS 代码：
div{line-height:0;}
This will affect generically to all your Div's. If you want your existing parent div only to have no spacing, you can apply the same into it.
这将普遍影响到您所有的 Div。如果您希望现有的父 div 没有间距，则可以将其应用到它。
回答by Adam Robinson
Although probably not the best method you could add:
虽然可能不是您可以添加的最佳方法：
#div1 {
...
font-size:0;
}
回答by Ankit Zalani
You may use line-height on div1 as below:
您可以在 div1 上使用 line-height ，如下所示：
<div id="div1" style="line-height:0px;">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
See this: http://jsfiddle.net/wCpU8/
看到这个：http: //jsfiddle.net/wCpU8/
回答by Leo T Abraham
HTML
HTML
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
CSS
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;
}
回答by Dan Ovidiu Boncut
Using a <br/>for making a new row it's a bad solution from the start.
Make your container #div1 to have a width equal to 3 child-divs.
<br/>in my opinion should not be used in other places than paragraphs.
使用 a<br/>来创建新行从一开始就是一个糟糕的解决方案。使您的容器 #div1 的宽度等于 3 个子 div。
<br/>我认为不应该用在段落以外的其他地方。
