如何在每行下方添加空格

Question

嗨，我不知道如何在这段代码的每一行下面添加空格。我尝试为其添加 br 和 margin，但没有任何帮助。

我什至不知道html中的这种类型是否良好，或者我应该将其更改为表格并执行此操作，这样可以在每行下方添加空格，但在html中它比另一个示例太长

<table>
                            <tr>
                              <td>Etiam poseure</td>
                              <td class="tučny__text">Nulla est</td>
                            </tr>
                            <tr>
                              <td>Fusce wisi</td>
                              <td class="tučny__text">2305</td>
                            </tr>
                            <tr>
                              <td>Bla hola tola et</td>
                              <td class="tučny__text">Rerum trada</td>
                            </tr>
                            <tr>
                              <td>Vie visi</td>
                              <td class="tučny__text">A</td>
                            </tr>
                          </table>

这是现在在 html 中使用 br 的样子

<div class="card-table">
    <div class="left-column">
      Etiam poseure <br />
      Fusce wisi <br />
      Bla hola tola et <br />
      Vie wisi
    </div>
    <div class="right-column">
      Nulla est<br />
      2305 <br />
      Rerurm trada <br />
      A
    </div>
  </div>

这是我的CSS

.card-table{

display: flex;
justify-content: space-between;
font-size: 1.25rem;
border: 1px solid black;
}

.left-column {
  flex-basis: 45%;
  font-weight: normal;
  font-style: italic;
  text-align: right;

}

.right-column {
  flex-basis: 45%;
  text-align: left;

}


.left-column br,
.right-column br {
  margin-bottom: 10px; 
}

Answer 1

我不会使用

<br/>

，因为它不是真正的语义。

这是一个例子：

.card-table {
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  border: 1px solid black;
}

.left-column, .right-column {
  display: flex;
  flex-direction: column;
}

.left-column {
  flex-basis: 45%;
  font-weight: normal;
  font-style: italic;
  text-align: right;
}

.right-column {
  flex-basis: 45%;
  text-align: left;
}

.left-column div, .right-column div {
  margin-bottom: 10px;
}

<div class="card-table">
    <div class="left-column">
      <div>Etiam poseure</div>
      <div>Fusce wisi</div>
      <div>Bla hola tola et</div>
      <div>Vie wisi</div>
    </div>
    <div class="right-column">
      <div>Nulla est</div>
      <div>2305</div>
      <div>Rerurm trada</div>
      <div>A</div>
    </div>
</div>