javascript - vue循環出的span之間沒有間距而直接寫的span之間有間距，這是為什麼？

Question

<p id="app">
    <span v-for="item in items">{{ item }}</span>
    <span>ttt</span>
    <span>sss</span>
</p>

new Vue({
    el: '#app',
    data: {
        items: ['aaa', 'bbb', 'ccc']
    },
})

顯示的效果大概是這樣的：

aaabbbccc ttt sss

前面循環出的span沒有間距，而後面的span有間距，不知道為什麼。

Answer 1

如果有display:inline或是display:inline-block的元素相鄰，並且它們之間有換行，那麼就會自動產生一段間隙。
可以在這些元素的父元素上設定font-size:0;，就可以消除換行帶來的間隙。

ps：這種情況下，如果程式碼不換行，就不會產生間隙。

Answer 2

你是不是強制回車換行的，這樣的話會有個間距的

Answer 3

行內元素的換行會佔位的, 解決辦法就是在你的#app中設定font-size:0; 這樣換行符大小就變成了0, 就不會出現你說的間距了.