在同一行的两个p之间留出空间(柔性盒)

Question

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

Answer 1

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>