使用display时不需要的空格：inline
这个问题在这里已经有了答案：
Chris coyier在这里处理这个空白处有很多解决方案：http://css-tricks.com/fighting-the-space-between-inline-block-elements/
您必须删除div关闭和打开之间的空白区域。
HTML：
<div style="background-color:red;"></div><div style="background-color:blue;"></div><div style="background-color:green;"></div><div style="background-color:yellow;"></div>
CSS：
body {
padding: 0px;
margin: 0px;
width: 100%;
}
div {
display: inline-block;
margin: 0px;
padding: 0px;
width: 50px;
height: 50px;
}
小提琴
简短的回答：
改变你的HTML代码
<body>
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:green;"></div>
<div style="background-color:yellow;"></div>
</body>
至
<body>
<div style="background-color:red;"></div><div style="background-color:blue;">
</div><div style="background-color:green;">
</div><div style="background-color:yellow;"></div>
</body>
这是内联元素的行为。 即在代码中你不应该在它们之间留有空白，以防止它们在渲染时显示空白/边距。
链接地址: http://www.djcxy.com/p/89259.html