如何去除inline-block之间的空隙？

最新推荐文章于 2023-02-21 19:12:41 发布

这个东西不好和你解释，因为我是菜狗

最新推荐文章于 2023-02-21 19:12:41 发布

阅读量244

点赞数 1

分类专栏： # HTML/HTML5

本文链接：https://blog.csdn.net/weixin_43912756/article/details/108657631

版权

HTML/HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<body>
    <ul class="box">
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>
</body>

.box{
border:1px solid #ccc;
padding-left: 4px;
}
.box>li{
display: inline-block;
background-color: red;
padding: 5px;
font-size: 16px;
}

在这里插入图片描述
元素被当成行内元素排版时，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

1、去除标签之间的空格和回车

<body>
    <ul class="box">
        <li>123
        </li><li>456
        </li><li>789</li>
    </ul>
</body>

或者

<body>
    <ul class="box">
        <li>123</li
        ><li>456</li
        ><li>789</li>
    </ul>
</body>

或

<body>
    <ul class="box">
        <li>123</li><!-- 
        --><li>456</li><!-- 
        --><li>789</li>
    </ul>
</body>

2、使用负边距

缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用。

3、给父级元素设置font-size:0，子元素根据实际情况使用font-size

.box{
border:1px solid #ccc;
padding-left: 4px;
font-size: 0;
}
.box>li{
display: inline-block;
background-color: red;
padding: 5px;
font-size: 16px;
}

在这里插入图片描述
缺点：inline-block元素必须设定字体，不然行内元素中的字体不不显示