我在为 div 使用内联 block 时看到了奇怪的边距。这发生在 chrome、firefox 和 safari 中。
代码和代码笔: http://codepen.io/lukaMis/pen/fknIg
<div class="wrapper">
<div class="smallColumn"></div>
<div class="smallColumn"></div>
<div class="smallColumn"></div>
<div class="smallColumn"></div>
</div>
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.wrapper {
position: relative;
width: 1024px;
height: 192px;
margin: 20px auto 0 auto;
background: rgba(0,0,0,0.2);
}
.smallColumn {
width: 20%;
height: 192px;
background: green;
display: inline-block;
}
我可以在不 float 的情况下去掉这些边距吗?
发送邮件 祝你今天过得愉快 卢卡
最佳答案
将 font-size: 0
添加到 .wrapper
类。
CSS
.wrapper {
position: relative;
width: 1024px;
height: 192px;
margin: 20px auto 0 auto;
background: rgba(0,0,0,0.2);
font-size: 0;
}
这是修改后的 CodePen:http://codepen.io/anon/pen/aGExt .
关于html - 使用内联 block 时奇怪的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25461180/