html - 为什么要制作宽度:20％会将其中一个链接推开？

This question already has answers here:

How do I remove the space between inline-block elements?
                                
                                    （39个答案）
                                
                        
                                2年前关闭。
            
                    

body {
    margin: 0;
}

.container div {
    display:inline-block;
    width:20%;
    box-sizing: border-box;
    text-align:center;
    background-color:green;
    padding: 0;
    border-width: 0;
}

.container a {
    text-decoration: none;
}

<div class="container">
    <div class="first"><a href="http://google.com">Google</a></div>
    <div class="second"><a href="http://google.com">Google</a></div>
    <div class="third"><a href="http://google.com">Google</a></div>
    <div class="fourth"><a href="http://google.com">Google</a></div>
    <div class="fifth"><a href="http://google.com">Google</a></div>
</div>

首先，对不起，如果这个问题有点愚蠢，但是，即使我将宽度设置为20％，是什么使它把最后一个链接推到了行外呢？我尝试将padding设置为0，将margin设置为0，但是似乎没有任何效果。是由于浏览器显示不正确而导致的错误？

最佳答案

因为彼此之间有空白...（我想是因为inline-block）
您可以使用display:flex到container div：

.container{
    display:flex;
}

.container div {
    width:20%;
    box-sizing: border-box;
    text-align:center;
    background-color:green;
    padding: 0;
    border-width: 0;
}

.container a {
    text-decoration: none;
}

<div class="container">
    <div class="first"><a href="http://google.com">Google</a></div>
    <div class="second"><a href="http://google.com">Google</a></div>
    <div class="third"><a href="http://google.com">Google</a></div>
    <div class="fourth"><a href="http://google.com">Google</a></div>
    <div class="fifth"><a href="http://google.com">Google</a></div>
</div>

编辑：使用font-size（而不是flex）

    .container{
         font-size: 0;
    }

    .container div {
        display:inline-block;
        width:20%;
        box-sizing: border-box;
        text-align:center;
        background-color:green;
        padding: 0;
        border-width: 0;
    }

    .container a {
     font-size: 15px;
        text-decoration: none;
    }

<div class="container">
        <div class="first"><a href="http://google.com">Google</a></div>
        <div class="second"><a href="http://google.com">Google</a></div>
        <div class="third"><a href="http://google.com">Google</a></div>
        <div class="fourth"><a href="http://google.com">Google</a></div>
        <div class="fifth"><a href="http://google.com">Google</a></div>
    </div>