padding with display: flex

Question

I try to make a spacing between boxes but it is not work, i tried to use padding margin bit it is not work.

My code :

html {
  background-color: #2d303a;
  background: #2d303a;
}

.container {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #319635;
  text-align: center;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
}

.item-1 {
  color: white;
  font: bold 16px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 20px;
}

.bacground_color {
  background: #2d303a;
}

<div class="container">
  <div class="item-1">1
    <div class="item-2">Dossier(s) non affecté(s) </div>
  </div>
  <div class="item-1">2
    <div class="item-2">Dossier(s) ouvert(s) sans action</div>
  </div>
  <div class="item-1">3
    <div class="item-2">Dossiers non modifiés depuis 5 jours</div>
  </div>
  <div class="item-1">4
    <div class="item-2">Dossiers hors gel</div>
  </div>
  <div class="item-1">5
    <div class="item-2">Dossier(s) en cours</div>
  </div>
</div>

I use display: flex i'm not sure if it's the good issue. Thanks for reading !

When using `display: flex;`, the container's `padding:` property is ignored when distributing elements. — Dai, Jun 13 '19 at 14:53
Looks like you do have space between the boxes, but as the background is on the outer container it's impossible to tell. If you put a border on the items you'll be able to see: https://jsfiddle.net/1gmqwfaL/1/ — Martin, Jun 13 '19 at 14:54
@Dai I am not sure how it's a duplicate. The OP is trying to add space between elements and his code seems to be fine as there is space between elements — Temani Afif, Jun 13 '19 at 14:55

score 1 · Accepted Answer · answered Jun 13 '19 at 15:34

Your code is working fine and there is spaces between items because of margin

if you want to ensue about this try removing background from container and put it in '.item-1' class I've also added padding of: 0 10px to each item

Check it out

html {
  background-color: #2d303a;
  background: #2d303a;
}

.container {
  display: flex;
  align-items: center;
  padding: 1rem;
  text-align: center;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
}

.item-1 {
  color: white;
  font: bold 16px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 20px;
  padding: 0 10px;
  background-color: #319635;
}

.bacground_color {
  background: #2d303a;
}

<div class="container">
  <div class="item-1">1
    <div class="item-2">Dossier(s) non affecté(s) </div>
  </div>
  <div class="item-1">2
    <div class="item-2">Dossier(s) ouvert(s) sans action</div>
  </div>
  <div class="item-1">3
    <div class="item-2">Dossiers non modifiés depuis 5 jours</div>
  </div>
  <div class="item-1">4
    <div class="item-2">Dossiers hors gel</div>
  </div>
  <div class="item-1">5
    <div class="item-2">Dossier(s) en cours</div>
  </div>
</div>

padding with display: flex

1 Answers1