Vue v-for directive not renders the right html

Question

I have a html mockup that I need to convert into dynamic Vue component.

My issue is about the v-for directive to render inline divs of squares. I don't understand why it not renders the same between plain html and v-for loop => see snippet below
However, when I inspect the code, it looks exactly the same:

I would like to know why this difference and if I can obtain the same result with the v-for directive without adding margin or padding or any css tricks.

new Vue({
  el: "#app"
})

.red-square {
  background-color: #dc3545;
  height: 10px;
  width: 10px;
  display: inline-block;
  margin: 0;
  border: 0;
}

.container {
  width: 200px;
}

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <div>With v-for</div>
  <div class="container">
    <div v-for="i in 5" class="red-square"></div>
  </div>
  <br>
  <div>With plain html</div>
  <div class="container">
    <div class="red-square"></div>
    <div class="red-square"></div>
    <div class="red-square"></div>
    <div class="red-square"></div>
    <div class="red-square"></div>
  </div>
</div>

Answer 1

When using inline-block as display property value, it renders a white space between divs when they're written with line break like :

<div></div>
<div></div>
<div></div>

but it removes the space when they're written in the same line as follows :

<div></div><div></div><div></div>

this how v-for directive renders the divs which removes that space.