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

Question

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

例如，我有 4 个 div，在 div 的一行中边距设置为 20 像素，填充 10 像素。 first 和 last 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

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

更新

除非我误解你的意思，否则我已经写的 CSS 将适用于 n parent/child 对。我添加了更多 parent/child 对来向您展示它的工作原理。

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

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

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

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

Css how to override child margin with parent padding?

css

trim

padding

更新