[英]Weird lines when using display: inline-block; inside <a> tags
[英]Weird margins when using inline-block
使用div内联块时,我看到奇怪的边距。 这发生在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;
}
我可以在没有浮动的情况下摆脱这些利润吗?
祝你有美好的一天卢卡
将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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.