在同一行的两个 p 之间留出空间（flexbox）[重复]答案

【问题标题】：Make space between two p in the same row (flexbox) [duplicate]在同一行的两个 p 之间留出空间（flexbox）[重复]
【发布时间】：2021-12-20 01:14:27
【问题描述】：

#imprint {
    background-color: black;
    color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    justify-content: center;
}

<article id="imprint">
    <p>test</p>
    <p>test</p>
</article>

如何在这两个 p 标签之间留出一些空间？我还没有找到解决这个问题的方法。

【问题讨论】：

标签： html css

【解决方案1】：

column-gap 是你要找的。p>

#imprint {
  background-color: black;
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  justify-content: center;
  
  /* add a gap */
  column-gap: 20px;
}

<article id="imprint">
  <p>test</p>
  <p>test</p>
</article>

或者，你可以只给p元素一些水平的padding：

#imprint {
  background-color: black;
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  justify-content: center;
}

#imprint p {
  padding-left: 10px;
  padding-right: 10px;
}

<article id="imprint">
  <p>test</p>
  <p>test</p>
</article>

【讨论】：

或者您可以添加gap:20px; 为元素创建空间而不指定行或列
@仅在您明确需要该行为时才使用它。

【解决方案2】：

html标签之间的空格

#imprint
{
    background-color: black;
    color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    justify-content: center;
    /* space before, between, and after */
    justify-content: space-around;
}

<article id = "imprint">
        <p>test</p>
        <p>test</p>
</article>

【讨论】：