Question

以下是我正在处理的代码不是一个页面，它是寻找可能在页面中重复使用的内容，我在上周左右遇到了这个问题，我问自己到底是什么这个保证金有一段时间了

让我看看我无法使用float:left;标签是有原因的，当我使用display:inline-block;时，元素（比如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>

Answer 1

问题是由div之间的标记中的空格引起的。如果你不想漂浮它们（为什么我不想），你有几个选择。

删除空格，使标记全部在同一行。
如果您不想在这些div中显示任何文本，那么您可以执行此操作

DIV {字体大小：0;}

Answer 2

这会导致每个元素左侧和右侧的边距（不是display:inline）：

* { margin:0 auto; }

您可能希望将此作为“重置”规则。

* { margin:0; }

然后，您可以将margin:0 auto应用于您想要居中的内容。

Answer 3

所有内部div类中的

都使用margin-left: 0px

.red {background:#F00;
height:300px; width:300px; margin-left: 0px; display: inline-block;
}

.blue {background:#03F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.green {background:#090;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.light-blue {background:#39F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.light-green {background:#9FC;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

.heavy-red {background:#C00;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}

我已在http://jsbin.com/uwavi3

发布了最终的HTML

我必须删除display：inline-block才能让它在jsbin上工作，同时从我不需要的文件本地运行它。我认为jsbin使用某种重置css。

浮动的

Edit2 ：左侧有点布局

很抱歉误解了这个问题。增加父div的宽度并使用跨度而不是div（对于红色，蓝色等彩色块）适用于IE8和FF3.6。点击http://jsbin.com/uwavi3/3

Answer 4

我常见的做法是为了使您的网站更加跨浏览器兼容，就是使用css重置文件。请查看此问题https://stackoverflow.com/questions/116754/best-css-reset

我的div上的奇数边缘，我该如何解决？

4 个答案: