css 应用代码中不存在的保证金

Question

对 Web 开发人员来说相当新。我有一个具有基本文档流的页面，图像后跟文本。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: url(Images_Albums/Background.jpg) no-repeat;
  background-size: 100%;
}
article {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 32%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  background: url(Images_Albums/FrontImage.jpg) no-repeat;
  background-size: 100%;
}
#container {
  margin: 0;
  padding: 0;
  margin-top: 9%;
  position: relative;
  width: 43%;
  left: 50%;
  transform: translate(-50%, 0);
}
img {
  max-width: 100%;
}
p {
  margin: 0;
  padding: 0;
  color: white;
  font-family: QuaestorSans;
  text-align: center;
}

<article>
  <div id="container">

    <div id="album1" class="albums">
      <img src="Images_Albums/Album1.jpg">
      <p>[details]</p>
    </div>

    <div id="album2" class="albums">
      <img src="Images_Albums/Album2.jpg">
      <p>[details]</p>
    </div>

    <div id="album3" class="albums">
      <img src="Images_Albums/Album3.jpg">
      <p>[details]</p>
    </div>
  </div>
</article>

我的问题是图片和文字之间有 space：

我在网络检查器中选择了文本元素，您可以看到该元素与上图之间存在间隙。我所有的边距和填充都是 0，那么为什么我会得到这个差距？非常感谢！

Answer 1

这个space是图片引起的，因为它是一个内联元素。要删除 space 只需将 display: block 添加到 img

CSS

img {
  max-width: 100%;
  display: block;
}

Answer 2

尝试为您的 img 标签添加 0 边距。许多 HTML 标签都附加了默认值 CSS，除非您特别覆盖它，否则将应用这些默认值。

img {
  max-width: 100%;
  margin: 0;
}

Answer 3

您可以使用 display: block 和 float: left 作为 img。

css 应用代码中不存在的保证金

css applying margin that is not there in the code

html

css

margin

padding