Question

您能以某种方式关闭触摸父容器的孩子的边距吗？

例如，我有4个div，在div的一行中边距设置为20 px，填充为10 px。第一和最后一个div不能使用其左或右边界吗？

我想要什么： 10px [div] 40px [div] 40px [div] 40px [div] 10px

代替： 30px [div] 40px [div] 40px [div] 40px [div] 30px

html

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

css

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

编辑：以更多简单的方式让每个div的第一个和最后一个div表现出来，怎么办？

Answer 1

您可以使用：first-child和：last-child css伪选择器删除这些项目的边距。请注意，我添加了边框以显示项目。

.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;
}

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

或者-您可以使用同级组合器在相邻的.child元素之间添加边距

.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;
}

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

Answer 2

您可以链接negation pseudo-class并为每个其他匹配的子元素添加左右margin。

更新

除非我对您有误解，否则我已经写过的CSS将适用于n个父子对。我添加了一些其他的父/子对，以说明它正在按说明工作。

.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;
}

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

Answer 3

这更适合您可以考虑差距的CSS网格：

.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;
}

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

Answer 4

您只需使用 .child：first-child 和 .child：last-child 伪选择器

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

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

Answer 5

您需要依靠：first-child css伪选择器删除第一个元素的边距。

.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;}

CSS如何使用父填充覆盖子边距？

5 个答案:

更新