去除inline-block间距

最新推荐文章于 2025-01-01 15:28:02 发布

weixin_30662011

最新推荐文章于 2025-01-01 15:28:02 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yryraa6/p/10608670.html

本文介绍了一种去除使用display:inline-block布局时产生的默认间距的方法。通过将父元素的font-size设置为0并为子元素单独设置字体大小，可以有效解决间距问题。

去除inline-block间距

通过display:inline-block设置元素为水平时，相邻元素之间会有几px的间距：

html:

<ul class="list">
    <li class="item">0</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
</ul>

css:

.item {
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color:#fff;
    background:#bb7819;
}

去除此间距的其中一种方法：

1.给父元素设置font-size:0;
2.给子元素设置字体大小

css:

.list {
   font-size: 0;
}

.item {
    display: inline-block;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color:#fff;
    background:#bb7819;
    font-size: 16px;
}

转载于:https://www.cnblogs.com/yryraa6/p/10608670.html