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