Как добавить пробелы между разными тегами

Question

У меня есть некоторый код, который выглядит следующим образом

<div class="topnav">
        <div>{{getGameView.Game.gameplayers[0].player.username}}</div>
        <p>VS</p>
        <div
          v-if="getGameView.Game.gameplayers.length > 1"
        >{{getGameView.Game.gameplayers[1].player.username}}</div>
        <div v-else>Waiting for opponent...</div>
      </div>

, который печатает это: NameVSName Я пытаюсь сделать так, чтобы между Name и VS было некоторое пространство, но не могу понять, как это сделать.

Answer 1

Решение состоит в том, чтобы присвоить элементу VS класс, подобный .vs, и добавить к нему немного padding:

p {
  margin: 0;
}

.topnav {
  display: flex;
}

.topnav .vs {
  padding-right: 10px;
  padding-left: 10px;
}

<div class="topnav">
  <div>Name</div>
  <p class="vs">VS</p>
  <div>Name</div>
</div>

Answer 2

Вы можете вставить пробел в html с помощью  .

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    nameA: "Job",
    nameB: "Bob"
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ nameA }}&nbsp;Vs&nbsp;{{ nameB }}
</div>

Как вставить пробелы / табуляции в текст с использованием HTML / CSS