likes
comments
collection
share

font-size: 0消除空白字符导致的行内元素额外间距

作者站长头像
站长
· 阅读数 84

看到有的地方使用了font-size: 0样式，因此特意了解下其作用。

要解决的问题

font-size: 0 设置字体大小为0，但是它要实现的效果却不是字体为0看不见，而是消除子行内元素间额外多余的空白。

html在编写时往往会设置一些适当的缩进、换行（尤其是代码进行格式化），如果元素的display为 inline 或者 inline-block或者本身就是行内元素，缩进、换行、空格等字符就会产生空白间隙，导致元素间产生多余的间距，页面显示可能会变形或错乱。

设置font-size: 0时，子元素必须指定一个font-size大小，否则内容不会显示。

行内元素之间会如果有空白，将会导致有一个字符的间隙。

解决行内元素之间空隙

以ul和li为例：

最合适的方法就是给li的父元素ul设置： font-size: 0;，给li设置：font-size: xxpx; 如此就可以消除各个元素之间空表间距。

下面以ul>li，分别对照其在html元素紧凑、正常格式化html标签、使用font-size: 0;时，li元素统一使用display: inline-block;，各自元素的表现。

能够很好的看到font-size: 0;消除多余间距的作用

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font-size 0的作用</title>
	<style>
        *{
            /* padding: 0;
            margin: 0; */
            box-sizing: border-box;
        }
        ul{
            list-style: none;
        }
        li{
            background: rgb(243, 122, 122);
            text-align: center;
            width: 50px;
            height: 40px;
            display: inline-block;
        }

        /* font-size为0 */
	    .font-size-0 {
            font-size: 0;
	    }

	    .font-size-0 * {
            font-size: 1rem;
	    }
	</style>
</head>

<body>
    <ul class="font-size-0">
        <p>font-size: 0;消除 display: inline-block; 或 display: inline; 时换行、缩进、空格等产生的空白间距</p>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <ul>
        <p>html中换行、缩进、空格等导致的元素的空白间距</p>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <ul><p>元素间没有换行、缩进、空格等字符</p><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</body>

各自的效果对比如下：

font-size: 0消除空白字符导致的行内元素额外间距

同样的，img、span、<a>超链接等其他行内元素，同样会产生空白间距。尤其是图片间的间隙问题，应该比较常见(并且由于是图片，不用考虑再设置文字大小)。

解决空白字符导致的行内元素间隙的其他办法

除了设置父级font-size为0之外，还可以考虑以下几种办法：

  • 使用letter-spacing、word-spacing等属性。比如设置父元素display:table;和word-spacing:-1em;，word-spacing的负值大小，可具体测试调整。

  • 行内元素添加浮动，如float:left;。

  • 行内元素的margin设置为适当的负值，也需要测试调整。比如margin-left:-8px;

最推荐的方式是，去掉标签之间的空格、换行等空白字符，使其不产生影响。

这也是压缩的最好处理方式，现代的打包工具基本都会清除这些多余的空白字符。

参考

主要转载参考自 font-size: 0的作用和用途

转载自:https://juejin.cn/post/7153267901640900638
评论
请登录