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

【问题标题】：Css how to override child margin with parent padding?CSS如何用父填充覆盖子边距？
【发布时间】：2019-09-06 00:27:19
【问题描述】：

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

例如，我在 div 的一行中有 4 个边距设置为 20 像素的 div，内边距为 10 像素。第一个和最后一个 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 都以这种方式运行？

【问题讨论】：

标签： css padding trim

【解决方案1】：

您只需要依赖 :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;}

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

【讨论】：

【解决方案2】：

您只需使用 .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>

【讨论】：

【解决方案3】：

这个比较适合可以考虑gap的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>

【讨论】：

【解决方案4】：

您可以链接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>

【讨论】：

【解决方案5】：

您可以使用 :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>

【讨论】：