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

这是我的 HTML 代码

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

我的CSS：@H_404_5@

#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>之前标签,页面将如下所示：@H_404_5@

但是如果我删除<！DOCTYPE html>标签之间,两行之间的“空白”将被删除@H_404_5@

但是我想使用<！DOCTYPE html>标签,它是推荐,但我找不到任何可以删除该空格的CSS规则,我已经使用margin：0; outline：none;等等,但它不工作,任何人都帮助我.谢谢！(我不擅长英文…)@H_404_5@

解决方法

解决这个问题的最简单的方法是将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会导致文本布局出现问题.@H_404_5@

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

这个问题来自哪里@H_404_5@

当浏览器处于“怪癖”模式时,可能会出现此问题.在这个例子中,改变
来自：@H_404_5@

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

至@H_404_5@

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

将会改变浏览器如何处理额外的空白.@H_404_5@

在怪癖模式下,空格被忽略,但以严格模式保留.@H_404_5@

参考文献：@H_404_5@

html doctype adds whitespace?@H_404_5@

https://developer.mozilla.org/en/Images,_and_Mysterious_Gaps@H_404_5@

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

解决方法

猜你在找的CSS相关文章