nav的a标签display设置为inline-block，为什么有间隙

a标签，将display属性设置为“inline-block”，而不设置浮动，不就既可以实现同行显示，又可以设置宽高了吗？可以这样设置吧？

但是，在 nav标签下，这样设置后，a标签间存在很大的间隙，将margin设置为0后，间隙依然没有完全消失，这是什么原因，如何解决？代码如下：

header > .container nav a{

display: inline-block;

width: 80px;

height: 63px;

line-height: 63px;

text-align: center;

font-size: 20px;

margin: 0;

}

慕妹8003063 2020-09-03

源自：项目：H5布局 2-2 编程练习

收起

1回答

好帮手慕粉回答被采纳获得+3积分 2020-09-03 10:33:16

同学你好，这是因为设置为行内块的话，各个元素之间会有间隙。举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline-block;
        }
        .two {
            width: 100px;
            height: 100px;
            background-color: gray;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>
</html>

按照常理来说，两个子元素的宽度和等于父元素的，应该在一行显示的，但是第二个子元素却被撑到了下一行：