gpt4 book ai didi

css - 删除 div 元素之间的 "whitespace"

转载 作者:技术小花猫 更新时间:2023-10-29 12:09:10 25 4
gpt4 key购买 nike

这是我的 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;等等......但它不起作用,任何人都可以帮助我。谢谢!(我英语不好...)

最佳答案

解决此问题的最简洁方法是将 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: 0font-size: 0会导致您的文本布局出现问题。

参见 fiddle :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

关于css - 删除 div 元素之间的 "whitespace",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18508442/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com