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

有如下代码

<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;
        }

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

  • 可以发现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;
        }

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

通过修改html文件来解决

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

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

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

通过{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;
        }

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

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

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

上一篇:MAC本机与远程服务器实现文件上传下载


下一篇:ASP.NET Core MVC 入门到精通 - 1. 开发必备工具 (2021)