僅使用 CSS 在 H4 等 HTML 元素之間添加空格

Question

<h4>FOLLOW US</h4>
<h4>CONTACT US</h4>
<h4>PAYMENT METHODS</h4>

大家好，我需要將所有這三個元素排成一行並在它們之間留出空間，我不想使用任何額外的 HTML 標記，例如：為每個元素添加類。 我只想使用 CSS。

從類似的問題我試圖使用這樣的東西，但這就是它導致的：

footer>h4{
    grid-area: firstfooter;
    padding: 48% 0% 0% 0%;
}

h4 ~ h4{
    margin-left: 30%;
}

但我需要這樣的：

如果我更改邊距或填充，它根本不會影響結果。

Answer 1

您可以使用<br> HTML 標記或在 CSS 中添加margin ，如下所示：

h4 {
  margin: 10px;
}

Answer 2

你可以使用彈性盒！ 這只適用於 h4 元素在頁腳中的情況

footer{
    display:flex;
    flex-direction:row;
    justify-content: space-between; 
}

你也可以說 space-around 而不是 space-between。 這將在第一個 h4 的左側和最后一個 h4 的右側添加空間。

Answer 3

這應該有效：

 footer{ display:flex; flex-direction:row; justify-content: space-between; } footer h4{ position: relative; display: inline; font-family: sans-serif; }

 <footer> <h4>I FORGOT</h4> <h4>WHAT THE </h4> <h4>WORDS WERE</h4> </footer>

Answer 4

嘗試

   footer h4 {
        margin-right: 30%;
   }

或者

footer h4 {
    display: inline-block;
    width: 33%;
    text-align: center;
}