Make space between two p in the same row (flexbox)

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>

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

connexo · Accepted Answer · 2021-11-06T08:51:12.473

4

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>

edited Nov 06 '21 at 08:51

answered Nov 06 '21 at 08:23

connexo

53,704
14
91
128

Or you can just add `gap:20px;` to create space the elements without specifying row or column – Felix Orinda Nov 06 '21 at 08:41
@Only use that if you explicitly want that behaviour. – connexo Nov 06 '21 at 08:46

Make space between two p in the same row (flexbox)

1 Answers1