这是我正在处理的代码，它不是一个页面，它是一个寻宝游戏，寻找可能在页面中重复使用的内容，我上周左右遇到了这个问题，我问自己到底是什么这个余量在这里呆了一会儿
想象一下，当我使用 display:inline-block; 时，我无法使用 float:left; 标签元素(比如 div)我该如何解决？
问题出在 FF3 上，IE8 从未在其他浏览器上测试过，但如果它在这些浏览器上不起作用，它将在什么上起作用？
原始代码
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="light-blue"></div>
<div class="light-green"></div>
<div class="heavy-red"></div>
</div>
</body>
</html>
已解决:解决方案是消除标记中的间距:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>
</div>
</body>
</html>
最佳答案
问题是由 div 之间的标记中的空格引起的。如果您不想让它们 float (为什么我不知道)，您有几个选择。
- 删除空格，使标记全部位于同一行。
如果您不想在这些 div 中显示任何文本，那么您可以这样做
div{font-size:0;}
关于css - 我的 div 上有奇怪的边距，我该如何解决这个问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4007659/