What's the difference between these Vue and manually generated html css elements?

Question

So I was trying to make a keypad component in Vue with numbers from 0 - 9 in a grid, then with 0 and clear at the bottom, as shown below.

1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
0 | Clear

I can do the 3x3 grid in Vue using a nested v-for but I found when I do the 0 and Clear row manually, something adds a space between the 0 and Clear.

Just to extend my problem if I extend the v-for to be 4 rows then the problem doesn't exist.

I've tried to make my problem as clear as possible with this Plunker and I've replaced the 0 and Clear with 10 | 11 | 12.

The html looks like this

 <div id="app">
<div class="row">
  <div class="col-12">

    <h5>V-For</h5>

    <div v-for="i in 4" class="keypad-row">
      <div class="d-inline-block keypad-col p-2" v-for="j in 3" @click="$emit('input', (((i - 1) * 3) +  j))">
        {{((i - 1) * 3) + j}}
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">

    <h5>Manual</h5>

    <div v-for="i in 3" class="keypad-row">
      <div class="d-inline-block keypad-col p-2" v-for="j in 3" @click="$emit('input', (((i - 1) * 3) +  j))">
        {{((i - 1) * 3) + j}}
      </div>
    </div>
    <div class="keypad-row">
      <div class="d-inline-block keypad-col p-2" @click="onClick(10)">
        10
      </div>
      <div class="d-inline-block keypad-col p-2" @click="onClick(11)">
        11
      </div>
      <div class="d-inline-block keypad-col p-2" @click="onClick(12)">
        12
      </div>
    </div>
  </div>
</div>

I've inspected / compared the elements and couldn't find anything. Is it possibly v-for is adding some css?

I know I could solve this problem using flex, but I'm intrigued as to why this doesn't work.