css_行内元素间的空白间距消除方法

目录

• 有如下代码
• 通过设置margin来解决
• 通过修改html文件来解决
• 通过{display:table;word-spacing:-1em;}来解决

有如下代码

<p class="text">
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
</p>

        .text {
            display: block;
            text-align: center;
            font-size: 20px;
            font-family: monospace;
        }

        .text>span {
            margin: 0;
        }

• 可以发现span元素间的间距莫名地大，原因是在html中行内元素间的换行符是有意义的，用户代理在渲染时会将行内元素间的换行符渲染为{width:当前行内元素fontSize属性的一半;height:当前行内元素fontSize属性}的空白。
• 比如上述例子中fontSize属性为20px，那么换行符会被渲染为10X20的空白。也就是说行内元素之间莫名多了10px的横向间距。

通过设置margin来解决

        .text {
            display: block;
            text-align: center;
            font-size: 20px;
            font-family: monospace;
        }

        .text>span {
            margin: 0 -5px;
        }

        .text>span:nth-of-type(1) {
            margin-left: 0;
        }

通过修改html文件来解决

将html中的span全部写在同一行，中间不插入换行符

    <p class="text">
        <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
    </p>

通过{display:table;word-spacing:-1em;}来解决

        .text {
            /* display: block; */
            text-align: center;
            font-size: 20px;
            font-family: monospace;
            display: table;
            word-spacing: -1em;
            width: 100%;
        }

        .text>span {
            margin: 0;
        }

• 在行内元素的父元素上设置{display:table;word-spacing:-1em;}。
• 1em取决于当前元素的font-size属性的值。
• 需要注意的是此处设置了父元素块元素展示，即父元素占据100%宽度，子元素居中。设置{display:table;}后父元素宽度由子元素内容决定，如果要保持子元素居中需要设置{width:100%;}