【css】解决两个行内元素或者inline-block元素之间的默认间距

最新推荐文章于 2022-12-02 14:44:44 发布

meichaoWen

最新推荐文章于 2022-12-02 14:44:44 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/meichaoWen/article/details/109286276

版权

1、bug原因

间距是因为元素标签之间的空白符，引起的。

示例如下：

将行内元素标签无空格不换行的写在一起，就不会有这个问题。（解决方案一）

2、解决方案

第一种解决方案不推荐，因为代码看起来混乱。

第二种解决方案：设置父元素的font-size:0。

    <style>
        .box span{background-color: chartreuse;}
        .box{font-size: 0;}  /*父元素字号设置为0*/
        .box span{font-size: 24px;} /*子元素设置字号*/
    </style>

<body>
    <div class="box">
        <span>我是</span>
        <span>一名</span>
        <span>党员</span>
    </div>
</body>

第三种解决方案：设置父级元素 display：flex。

    <style>
        .box span{background-color: chartreuse;}
        .box{display: flex;} /*flex布局，会使行内元素有了块级元素的属性，看需求*/
    </style>

<body>
    <div class="box">
        <span>我是</span>
        <span>一名</span>
        <span>党员</span>
    </div>
</body>

第四种解决方案：父级元素设置字间距一个合适的负值（需要去试）。

    <style>
        .box span{background-color: chartreuse;}
        .box{word-spacing: -10px;} /*字间距设置一个合适的负值*/
    </style>

<body>
    <div class="box">
        <span>我是</span>
        <span>一名</span>
        <span>党员</span>
    </div>
</body>

以上，第二种解决方案被大家推荐，我以后也用第二种方案。

最后，我真的是一名党员。

meichaoWen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
【css】解决两个行内元素或者inline-block元素之间的默认间距

1、bug原因间距是因为元素标签之间的空白符，引起的。示例如下：将行内元素标签无空格不换行的写在一起，就不会有这个问题。（解决方案一）2、解决方案第一种解决方案不推荐，因为代码看起来混乱。第二种解决方案：设置父元素的font-size:0。 <style> .box span{background-color: chartreuse;} .box{font-size: 0;} /*父元素字号设置为0*/..
复制链接

扫一扫