为什么 flexbox 容器周围有填充？ [复制]答案

【问题标题】：Why is there a padding around flexbox containers? [duplicate]为什么 flexbox 容器周围有填充？ [复制]
【发布时间】：2019-08-15 19:42:18
【问题描述】：

容器周围和两列之间似乎有一个填充物。我该如何摆脱它们？

我尝试将边距和内边距设置为 0，但没有成功。

https://imgur.com/iM1Pl0H

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>

提前谢谢你！

【问题讨论】：

这就是它发生的原因，因为 img 是内联的。将display: block; 添加到.flexbox img
谢谢@GrzegorzT。那行得通，我添加了 margin: 0;到 html 以摆脱边框。

标签： html css flexbox

【解决方案1】：

在 HTML 中，每个元素都有默认属性。我认为由于<div> 元素而存在此填充。要删除它，您可以设置

.flexbox { padding: 0 }

【讨论】：

@Druckles 感谢指正。