首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Css如何用父边距覆盖子边距?

Css如何用父边距覆盖子边距?
EN

Stack Overflow用户
提问于 2019-04-16 08:47:13
回答 4查看 3.5K关注 0票数 2

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

例如,我有4个div,在div的一行中,边距设置为20px,padding10px。第一个和最后一个div可以不使用左边距或右边距吗?

我想要的: 10px div 40px div 10px

而不是: 30px div 40px div 30px

html

代码语言:javascript
复制
<div class='parent'>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
   <div class='child'></div>
</div>

css

代码语言:javascript
复制
.parent{
   display: flex;
   padding: 10px;
}
.child{
   maring 20px;
   width: 100px;
   height: 100px;
}

编辑:如果有更多行这样的div,有什么简单的方法可以让每个第一个和最后一个div都以这种方式运行吗?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-04-16 09:04:10

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

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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元素之间添加边距

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2019-04-16 08:56:57

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

更新

除非我误解了您,否则我已经编写的CSS将与n父/子对一起工作。我添加了更多的父/子对,以向您展示它的工作方式。

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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>

票数 0
EN

Stack Overflow用户

发布于 2019-04-16 17:32:22

这更适合于CSS网格,在那里你可以考虑间隙:

代码语言:javascript
复制
.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;
}
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55699065

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档