文字溢出的问题谁能告诉我

以下是我的html代码


<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="xiaomi.css">
</head>
<body>
    <!-- 小米商城头部分布 -->
    <div class="header">
        <div class="hd-center w">
            <ul>
                <li><a href=" #"> 小米商城 </a></li>
                <li><a href=" #"> MIUI</a></li>
                <li><a href=" #"> IoT</a></li>
                <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>
                <li><a href=" #"> 资质证照</a></li>
                <li><a href=" #"> 协议规则</a></li>
                <li><a href=" #"> 下载app</a></li>
                <li><a href=" #"> Select Location</a></li>
            </ul> 
            <div class="hd-center2">
                <ul>
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">消息通知</a></li>
                </ul>
            </div>
        </div>
        
    </div>
    <!-- 搜索模块 -->
    <!-- <div class="search w">
        <ul>
            <li><a href=""> Xiaomi手机</a></li>
            <li><a href=""> Redmi 红米</a></li>
            <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>
            <li><a href=""> 服务</a></li>
            <li><a href=""> 社区</a></li>
        </ul>
    </div> -->
</body>
</html>

一下是我的css代码

* {
    /* 先清除默认的内外边距 */
    margin: 0px;
    padding: 0px;
}
a {
    /* 将网页中所有的a链接默认的下划线设置为没有 */
    text-decoration: none;
}

li {
    /* 去除列表前面的小圆点 */
    list-style: none;
}

.w {
    width: 1226px;
    margin: 0px auto;
}

.header {
    height: 40px;
    background-color: #333333;
}

.hd-center {
    height: 40px;
    background-color: red;
    line-height: 40px;
}
.hd-center>ul {
    float: left;
}
.hd-center>ul>li {
    float: left;
}
.hd-center>ul>li>a {
   
    font-size: 12px;
    color: #B0B0B0;
}

/* .search {
    margin-top: 10px;
    height: 100px;
    background-color: pink;
    background-image: url(../../images/logo-mi2.png);
    background-repeat: no-repeat;
    background-size: 56px 56px;
    background-position:  0px center ;
}
.search>ul {
    float: left;
    margin-left: 234px;
    background-color: red;
}
.search>ul>li {
    float: left;
}
.search>ul>li>a {
    font-size: 16px;
    color: #333333;
    padding: 0px 15px;
    line-height: 100px;
} */

当我给.search>ul>li>a设置了font-size 为什么li的高度会变成41px，会被撑大，我不是设置行高为40px吗
请看图片

img


这是没有设置font-size为12px的样子

img


把a改成display：block就恢复正常了为什么

a标签是个行内元素，display:block才会覆盖整个li