如何删除 img 和 h3 标签之间的边距？ [复制]答案

【问题标题】：How to remove margin between img and h3 tag? [duplicate]如何删除 img 和 h3 标签之间的边距？ [复制]
【发布时间】：2018-02-24 20:05:05
【问题描述】：

我无法删除 img 和 h3 之间的空白。我做了一个codepen来展示：https://codepen.io/morper/pen/RQYKpw

这是html：

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

div {
  border: black solid 1px;
  background-color: #0017ff;
  width: 100%;
  height: 100px;
}

img {
  margin: 0;
  padding: 0;
}

h3 {
  background-color: #ff0c57;
  margin: 0;
  padding: 0;
}

<body>
  <main>
    <div>div</div>
    <img src="https://images-gmi-pmc.edge-generalmills.com/e8198dd2-770b-4c7c-a748-ca7538cf48d0.jpg" alt="cookies">
    <h3>H3</h3>
    <p>paragraph</p>
  </main>
</body>

我尝试将边距和内边距设置为 0，但这并没有减少。

【问题讨论】：

标签： css margin padding

【解决方案1】：

在图片上使用display: block。

    * {
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      text-align: center;
    }

    div {
      border: black solid 1px;
      background-color: #0017ff;
      width: 100%;
      height: 100px;
    }

    img {
      margin: 0 auto;
      padding: 0;
      display: block;
    }

    h3 {
      background-color: #ff0c57;
      margin: 0;
      padding: 0;
    }

    <body>
      <main>
        <div>div</div>
        <img src="https://images-gmi-pmc.edge-generalmills.com/e8198dd2-770b-4c7c-a748-ca7538cf48d0.jpg" alt="cookies">
        <h3>H3</h3>
        <p>paragraph</p>
      </main>
    </body>

【讨论】：

最好给出原因，因为 display:block 可能并不适合所有情况
是的。我正在考虑这一点，但是在重复问题中它是如何工作的有一个很好的解释。 stackoverflow.com/a/34952703/1977847 另外，我发现我几乎从未真正使用内联图像。它们要么是块元素，要么在弹性容器中。
所以不要回答，而是考虑标记为重复；）
直到我发布答案后，我才考虑检查重复项。但是当我找到一个副本时，你已经找到了另一个。