行内元素之间空白间隙解决方案

不知道大家在写html代码时,是不是遇到过行内标签之间有空白间隙的情况,就像下面的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        body {
            background: green;
        }
        .wrap {
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }
        span {
            background: orangered;
        }
</style>
</head>
<body>
    <div class="wrap">
        <span>你好</span>
        <span>不好</span>
    </div>
</body>
</html>
图片

通过效果图我们可以看出,两个span标签之间莫名的出现了空格,【你好 不好】并没有挨在一起。这是因为我们在书写html代码时,两个 span 标签之间输入了换行符,也就是回车。解决这个问题有多种方案,具体如下:

方案一:

书写时不换行,代码阅读性很差,看了让人头疼

<div class="wrap">
    <span>你好</span><span>不好</span>
</div>


方案二:

设置父标签的 font-size: 0; 此方案的弊端就是需要给每个子节点设置字体大小。

<style>
    .wrap {
        font-size: 0;
    }
    span {
        background: orangered;
        font-size: 16px;
    }
</style>
<div class="wrap">
    <span>你好</span>
    <span>不好</span>
</div>

方案三:

通过浮动 float 解决。float是忽略空白符的,不过你的CSS布局可能要重新花一下心思,可能会涉及到清除浮动之类设置。

<style>
    span {
        background: orangered;
        float: left;
    }
</style>
<div class="wrap">
    <span>你好</span>
    <span>不好</span>
</div>

方案四:

通过设置父节点 word-spacing: -4px; 解决。弊端在于根据字体的大小,word-spacing 的值应该相应的调整,可能会有兼容性问题。

<style>
    .wrap {
        word-spacing: -4px;
    }
    span {
        background: orangered;
    }
</style>
<div class="wrap">
    <span>你好</span>
    <span>不好</span>
</div>

方案五:

通过设置子节点 margin-left: -4px; 解决。相比于第四种,这种兼容性比较好。

<style>
    span {
        background: orangered;
        margin-left: -4px;
    }
    span:first-child {
        margin-left: 0;
    }
</style>
<div class="wrap">
    <span>你好</span>
    <span>不好</span>
</div>

方案六:

通过 white-space-collapse: discard; 解决。但是,由于该属性还属于提案,各浏览器厂商没有及时跟进和实现,所以根本用不了。哈哈,希望这个属性快快上架~~

white-space-collapse 的取值如下:

collapse:将一系列空白折叠为一个单独的字符(或者在某些情况下,没有字符)
preserve:阻止用户代理折叠空白,换行符保留为强制换行符。
preserve-breaks:该值将与collapse一样折叠空白字符,但保留换行符为强制换行符
discard:抛弃所有空白。


具体使用哪一种方案,还是根据你自己的需求进行选择吧,拜拜 —— :)

发表评论

登录后才能评论
网站客服
网站客服
申请收录 侵权处理
分享本页
返回顶部