Make space between two p in the same row (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>

How can make some space between this two p tags?
I haven’t found a solution to this problem.

>Solution :

column-gap is what you’re looking for.

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

Alternatively, you can just give the p elements some horizontal 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>

Leave a Reply