时间戳

首页 > 解决方案 > 在同一行中的两个 p 之间留出空间（flexbox）

html - 在同一行中的两个 p 之间留出空间（flexbox）

问题描述

#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 标签之间留出一些空间？我还没有找到解决这个问题的方法。

标签： htmlcss

解决方案

column-gap就是你要找的。

#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>

推荐阅读