删除div元素之间的"空格"
phi*_*o37 19 html css whitespace margin
这是我的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; 等等...但它不起作用,任何人都帮助我.谢谢!(我不擅长英语......)
Mar*_*det 32
解决此问题的最简单方法是将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模式下,空格被忽略,但在严格模式下保留.
参考文献:
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
小智 5
你需要这个
<!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;
}
就是这样,有趣的是删除所有那些空白问题.
| 归档时间： |
|
| 查看次数： |
114064 次 |
| 最近记录： |