2
votes

CSS comment remplacer la marge enfant avec le remplissage du parent?

Pouvez-vous en quelque sorte désactiver la marge de l'enfant qui touche le conteneur parent?

Par exemple, j'ai 4 div avec une marge fixée à 20 px sur une ligne en div avec un remplissage de 10 px. le premier et le dernier div ne peuvent-ils pas utiliser leur marge gauche ou droite?

ce que je veux: 10px [div] 40px [div] 40px [div] 40px [div] 10px

au lieu de: 30px [div] 40px [div] 40px [div] 40px [div] 30px

html

.parent{
   display: flex;
   padding: 10px;
}
.child{
   maring 20px;
   width: 100px;
   height: 100px;
}

css

<div class='parent'>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
</div>

css trim padding

0 commentaires

5 Réponses :

0
votes

Vous pouvez chaîner la pseudo-classe de négation et incluez la marge gauche et droite pour chaque autre élément enfant correspondant.

Mise à jour

Sauf si je vous comprends mal, le CSS que j'ai déjà écrit fonctionnera avec n paires parent / enfant. J'ai ajouté quelques paires parent / enfant supplémentaires pour vous montrer que cela fonctionne comme décrit.

<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>2</div>
  <div class='child'>3</div>
  <div class='child'>4</div>
</div>

<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>2</div>
  <div class='child'>3</div>
  <div class='child'>4</div>
</div>

<div class='parent'>
  <div class='child'>1</div>
  <div class='child'>2</div>
  <div class='child'>3</div>
  <div class='child'>4</div>
</div>

.parent {
  display: flex;
  padding: 10px;
}

.child {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
}

.child:not(:first-child):not(:last-child) {
  margin-left: 20px;
  margin-right: 20px;
}

0 commentaires

2
votes

Vous pouvez utiliser les pseudo-sélecteurs css: first-child et: last-child pour supprimer la marge sur ces éléments. Notez que j'ai ajouté des bordures pour afficher les éléments.

<div class='parent'>
   <div class='child'>test 1</div>
   <div class='child'>test 2</div>
   <div class='child'>test 3</div>
   <div class='child'>test 4</div>
</div>

.parent{
   display: flex;
   padding: 10px;
   border: solid 1px red;
}
.child{
   margin: 20px 0;
   width: 100px;
   height: 100px;
   border: solid 1px blue;
}

.child + .child{
 margin-left: 40px;
}

Alternativement - vous pouvez utiliser le combinateur frère pour ajouter des marges entre les éléments .child adjacents

<div class='parent'>
   <div class='child'>test 1</div>
   <div class='child'>test 2</div>
   <div class='child'>test 3</div>
   <div class='child'>test 4</div>
</div>

.parent{
   display: flex;
   padding: 10px;
   border: solid 1px red;
}
.child{
   margin: 20px;
   width: 100px;
   height: 100px;
   border: solid 1px blue;
}
.child:first-child {
 margin-left: 0;
}
.child:last-child {
 margin-right: 0;
}

0 commentaires

0
votes

Ceci est plus approprié pour la grille CSS où vous pouvez considérer les lacunes:

<div class='parent'>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
</div>

.parent{
   display: grid;
   grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
   grid-column-gap:40px;
   padding:10px;
   border:1px solid;
}
.child{
   height: 100px;
   background:red;
}

0 commentaires

0
votes

Vous n'utilisez que les pseudo-sélecteurs .child: first-child et .child: last-child

<div class='parent'>
        <div class='child'>dfgdfg</div>
        <div class='child'>dfgdfg</div>
        <div class='child'>dfgdfg</div>
        <div class='child'>dgfdg</div>
     </div>

.parent{
      display: flex;
      padding: 10px;
      }
    .child{
      margin: 20px;
      width: 100px;
      height: 100px;
    }
    .child:first-child {
      margin-left: 0;
    }
    .child:last-child {
      margin-right: 0;
    }

0 commentaires

0
votes

Tout ce dont vous avez besoin pour dépendre: des pseudo-sélecteurs css first-child pour supprimer la marge du premier élément.

<div class='parent'>
   <div class='child'>h</div>
   <div class='child'>1</div>
   <div class='child'>2</div>
   <div class='child'>3</div>
</div>

.parent{display: flex; padding: 10px; border:solid 1px red;}
.parent .child{margin:20px 0px 20px 40px; width: 100px; height: 100px; border:solid 1px green;}
.parent .child:first-child{margin-left:0;}

0 commentaires