如何在CSS中添加换行？标题与表格间换行实现方法咨询

我的代码里，H1标题和表格放在了设置flex布局的.slide容器中，之前加的<br>标签没起到换行效果，想通过CSS实现两者之间的换行（垂直间距），相关代码如下：

HTML代码 #

<li class="slide">
  <H1>TITLE</H1> 
  <table border=1>
    <tr>
      <td>qdf</td>
      <td>qdf</td>
    </tr>
  </table>     
</li>

CSS代码 #

.slide {  
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

给你几个可行的实现方法：

• 方法1：把flex容器改成垂直排列
  默认flex容器是横向排列子元素，改成垂直排列后，H1和表格会自动上下分布，还能保持居中对齐：

.slide {  
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
  display: flex;
  flex-direction: column; /* 添加这行 */
  justify-content: center;
  align-items: center;
}

• 方法2：给H1加底部外边距
  如果不想改变布局方向，直接给H1设置底部间距就能拉开和表格的距离：

.slide h1 {
  margin-bottom: 20px; /* 数值可以根据需求调整 */
}

• 方法3：给表格加顶部外边距
  和方法2原理一样，给表格设置顶部间距也能达到效果：

.slide table {
  margin-top: 20px; /* 数值可以根据需求调整 */
}

为啥原来的<br>没用？因为.slide是flex容器，里面的H1和表格会被当作flex项目，默认横向排列，<br>在这种布局下不会触发换行，所以得用CSS调整布局或间距来实现。

内容的提问来源于stack exchange，提问作者user609511