css applying margin that is not there in the code

Question

fairly new to web dev. I have a page that has a basic document flow, with images followed by text.

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>

My issue is that there is space between the images and the text:

I have web inspector with the text element selected and you can see there is a gap between this element and the image above. All my margins and my paddings are 0, so why am I getting this gap? Many thanks!

Answer 1

This space is caused of the image because it's an inline element. To remove the space just add display: block to the img

CSS

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

Answer 2

Try adding a 0 margin to your img tag. Many HTML tags have default CSS attached to them which will be applied unless you specifically override it.

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

Answer 3

You can use display: blockand float: left for img.