Avec Flexbox, la création de gouttières est pénible, en particulier lorsque l'emballage est impliqué.
Vous devez utiliser des marges négatives ( comme indiqué dans la question ):
#box {
display: flex;
width: 100px;
margin: 0 -5px;
}
... ou modifiez le HTML ( comme indiqué dans une autre réponse ):
<div class='flex-wrapper'>
<div class='flex'>
<div class='box'></div>
<div class='box'></div>
...
</div>
</div>
... ou autre chose.
Dans tous les cas, vous avez besoin d'un hack laid pour le faire fonctionner car flexbox ne fournit pas de fonctionnalité " flex-gap
" ( du moins pour l'instant ).
Le problème des gouttières, cependant, est simple et facile avec CSS Grid Layout.
La spécification de grille fournit des propriétés qui créent de l'espace entre les éléments de la grille, tout en ignorant l'espace entre les éléments et le conteneur. Ces propriétés sont:
grid-column-gap
grid-row-gap
grid-gap
(le raccourci pour les deux propriétés ci-dessus)
Récemment, la spécification a été mise à jour pour se conformer au module CSS Box Alignment , qui fournit un ensemble de propriétés d'alignement à utiliser sur tous les modèles de boîtes. Les propriétés sont donc maintenant:
column-gap
row-gap
gap
(sténographie)
Cependant, tous les navigateurs prenant en charge Grid ne prennent pas en charge les nouvelles propriétés, donc j'utiliserai les versions originales dans la démo ci-dessous.
De plus, si un espacement est nécessaire entre les articles et le conteneur, padding
le conteneur fonctionne très bien (voir le troisième exemple dans la démo ci-dessous).
De la spécification:
10.1. Gouttières: les row-gap
, column-gap
et gap
propriétés
Les propriétés row-gap
et column-gap
(et leur gap
raccourci), lorsqu'elles sont spécifiées sur un conteneur de grille, définissent les gouttières entre les lignes de grille et les colonnes de grille. Leur syntaxe est définie dans CSS Box Alignment 3 §8 Gaps Between Boxes .
L'effet de ces propriétés est comme si les lignes de grille affectées avaient acquis une épaisseur: la piste de grille entre deux lignes de grille est l'espace entre les gouttières qui les représentent.
.box {
display: inline-grid;
grid-auto-rows: 50px;
grid-template-columns: repeat(4, 50px);
border: 1px solid black;
}
.one {
grid-column-gap: 5px;
}
.two {
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.three {
grid-gap: 10px;
padding: 10px;
}
.item {
background: lightgray;
}
<div class='box one'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<hr>
<div class='box two'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
<hr>
<div class='box three'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
Plus d'information: