Css如何用父边距覆盖子边距？
Css如何用父边距覆盖子边距？
提问于 2019-04-16 08:47:13
你能以某种方式关闭接触父容器的子容器的边距吗？
例如，我有4个div，在div的一行中，边距设置为20px，padding10px。第一个和最后一个div可以不使用左边距或右边距吗？
我想要的: 10px div 40px div 10px
而不是: 30px 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都以这种方式运行吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-04-16 09:04:10
您可以使用: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>
Stack Overflow用户
发布于 2019-04-16 08:56:57
您可以链接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>
Stack Overflow用户
发布于 2019-04-16 17:32:22
这更适合于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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55699065
复制相关文章
相似问题
腾讯云开发者
