Unwanted spaces when using display: inline
This question already has an answer here:
Chris coyier在这里处理这个空白处有很多解决方案：http://css-tricks.com/fighting-the-space-between-inline-block-elements/
You have to remove white spaces between div closing and opening.
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;
}
fiddle
short answer :
change your HTML code from
<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>
to
<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>
this is how inline elements behave. ie you should not have whitespaces between them in the code to prevent them from showing whitespace/margin when rendered.
链接地址: http://www.djcxy.com/p/89260.html上一篇: 如何删除列表项目之间的空间