javascript - There is no space between spans looped out by vue, but there is space between spans written directly. Why is this?

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']
    },
})

The display effect is probably like this:

aaabbbccc ttt sss

The span looped out in the front has no spacing, but the span in the back has spacing. I don’t know why.

Answer 1

If there are display:inline or display:inline-block elements adjacent to each other and there is a line break between them, a gap will automatically be generated.
You can set font-size:0; on the parent elements of these elements to eliminate the gap caused by line breaks.

ps: In this case, if the code does not wrap, there will be no gap.

Answer 2

Have you forced carriage return and line feed? In this case, there will be a gap

Answer 3

The line breaks of inline elements will occupy space. The solution is to set font-size:0; in your #app. In this way, the line break size becomes 0, and the spacing you mentioned will not appear.