<分区>
<分区>
容器周围和两列之间似乎有填充物。我该如何摆脱它们？
我尝试将 margin 和 padding 设置为 0 但它不起作用。
body,
html {
width: 100%;
height: 100%;
}
main {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100%;
}
.flexbox img {
width: 100%;
height: auto;
}
@media all and (max-width: 650px) {
.flexbox {
width: 100%;
}
}
@media all and (min-width: 651px) {
.col-1,
.col-2 {
width: 50%;
}
.col-3 {
width: 100%;
}
}<main id="container">
<div class="flexbox col-1">
<img src="http://placehold.it/800x400/f00/000?text=1" />
</div>
<div class="flexbox col-2">
<img src="http://placehold.it/800x400/0f0/000?text=2" />
</div>
<div class="flexbox col-3">
<img src="http://placehold.it/800x400/06f/000?text=3" />
</div>
</main>提前致谢!
最佳答案
在 HTML 中，每个元素都有默认属性。我认为此填充的存在是因为 <div>元素。要删除它，您可以设置
.flexbox { padding: 0 }
关于html - 为什么 flexbox 容器周围有填充物？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57508922/