font-size: 0的作用和用途

最新推荐文章于 2024-06-28 23:31:54 发布

-代号中2半-

最新推荐文章于 2024-06-28 23:31:54 发布

阅读量8.9k

点赞数 33

分类专栏：前端 font-size 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_43743148/article/details/107838014

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

font-size

2 篇文章 0 订阅

订阅专栏

解释

font-size: 0 不是指字体大小是0px

代码自动格式化的时候，往往会设置一些适当的缩进、换行，但当元素的display为inline或者inline-block的时候，这些缩进、换行就会产生空白，导致前端页面展示变形。

1、解决表格之间空隙

以ul和li为例：
最合适的方法就是给li的父级ul设置： font-size: 0;
给li设置：font-size: a px; 如此就达到了所需效果，li不设置font-size就是之间没有空格的效果。


<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
    ul {
        list-style: none;
    }
    li {
        width: 50px;
	    height: 40px;
        display: inline-block;
        background: red;
    }
</style>
</head>

<body>
	<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

效果：
在这里插入图片描述
因为li标签用到 display: inline-block; 行内级元素之间，换行会被解释成空格。在父级元素添加font-size：0可以除去间隙，记得给li也要给与font-size：多少 px；不然显示不出内容

2、解决图片之间的空隙

在这里插入图片描述
一样因为行内级元素的原因，图片之间会出现间隙，直接在给div标签一个font-size：0; 即可。

这时候图片上下左右需要间隙可以用margin设置

3、解决行内元素空隙多种方法

其实由display:inline-block元素之间空隙的解决办法不止设置父级font-size为0这一种。
我们还可以设置父元素，display:table和word-spacing：
在这里插入图片描述
为inline-block元素添加样式float:left ：

设置子元素margin值为适当的负数：