解释：
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值为适当的负数：
总结：
因为在父元素设置了
font-size: 0，所以子元素继承了父元素的属性，记得需要添加子元素的font-size大小才能显示出来。其他解决空隙的方法都各有缺点，要选择一条适写该网页的方法
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
