在编写HTML文件时，我们就会遇到，类似这样的问题
CSS文件：
<style> ul{ list-style: none; } li{ width: 100px; height: 50px; line-height: 50px; background: hotpink; display: inline-block; text-align: center; } </style>
HTML结构：
<ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul>
我们发现，li标签之间会存在空白格，这是由于，标签换行造成的，那么怎么去掉这些空白格呢？
有两个解决方案：
方案一：去掉li标签之间的换行
处理后的效果
方案二：给父级标签设置font-size:0px;给当前标签设置font-size：14px;
处理后的效果
<style>
ul{
list-style: none;
font-size: 0px;
}
li{
width: 100px;
height: 50px;
line-height: 50px;
background: hotpink;
display: inline-block;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<ul>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
</body>
原文：http://www.cnblogs.com/songdongdong/p/6443619.html