对单行的ul设置line-height，但其实际高度却被撑大了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                line-height: 54px;
                font-size: 0;
            }
            ul li{
                display: inline-block;
                font-size: 16px;
                margin: 0 18px;
            }
            nav{
                border-bottom: 1px solid #000;
            }
        </style>
    </head>
    <body>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">我的活动</a></li>
                    <li><a href="#">我的卡券</a></li>
                    <li><a href="#">到店首页</a></li>
                    <li><a href="#">帮助中心</a></li>
                </ul>
            </nav>
    </body>
</html>

li因继承了ul的line-height:54px，所以高度是54px，但ul却是被撑大到60px或61px呢

1.把line-height:1添加到*{}里面
或者
2.把ul里面的font-size:0去掉
或者
3.把ul里面的line-height:54px移到ul li{}里面去

不建议给ul,tr等元素添加宽高，会导致在不同浏览器显示不一致的问题。这里给li设置line-height:54px就没有任何问题了。

因为你还给li设置了margin值啊

https://jsfiddle.net/RayLiao/yc66c71k/

这个间距是display:inline-block;造成的。

是因为ul里的baseline和li里的不一致导致的空间。不一致的原因是font-size不一致。像@hiyton 说的都可以解决。或者直接设置li的vertical-align:bottom。

【热门文章】