删除“空格”在div元素之间 [英] Remove "whitespace" between div element
问题描述
这是我的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> 标记，页面将如下所示：
但如果我删除<！DOCTYPE html> 标签，两行之间的空格将被删除
但我想使用<！DOCTYPE html& 标签，建议，但我找不到任何可以删除空白的CSS规则，我已经使用margin：0; outline：none;等等，但它不工作，任何人帮助我。谢谢！（我不擅长英语...）
解决这个问题的最干净的方法是应用 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;
}
如果您要将内容添加到 / code>，然后使用 line-height：0 或 font-size：0 导致您的文本布局出现问题。
请参阅fiddle： http：// jsfiddle。 net / audetwebdesign / eJqaZ /
其中此问题来自
浏览器处于quirks模式。在此示例中，更改
doctype从：
<！DOCTYPE HTML PUBLIC DTD HTML 4.0 Transitional // EN>
到
<！DOCTYPE html PUBLIC - // W3C // DTD HTML 4.0 Strict // EN>
会改变浏览器如何处理额外的空格。
在quirks模式下，忽略空格，但以严格模式保留。
参考： b
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
This is my HTML code
<div id="div1">
<div></div><div></div><div></div><br/><div></div><div></div><div></div>
</div>
My 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:
But if I remove the <!DOCTYPE html> tag, the 'whitespace' between the two lines will be remove
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 ...)
The cleanest way to fix this is to apply the vertical-align: top property to you CSS rules:
#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: 0 or font-size: 0 would cause problems with your text layout.
See fiddle: 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.
References:
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
这篇关于删除“空格”在div元素之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
