CODEWITHSUNDEEP
htmlcss
Brandon
Brandon

Reputation: 1195

Why is a there about 1-2px gap between my caption and image?

I can't seem to find a any margin so I'm a confused as to what the cause is and how to remove it. You can't see the image but you can see the grey border with the gap between the caption and image still https://jsfiddle.net/nyftp2b7/11/

.caption-clr {
  background-color: rgba(0, 0, 0, .1);
}
body {
  background-color: lightgreen;
}
<figure class="main-image">
  <a href="img/cannabislegalmap.png">
    <img src="img/cannabislegalmap.png" width="100%" alt="Image of a map of states were recreational cannabis is legal">
  </a>
  <figcaption class="caption-clr">States were recreational cannabis use is legal.
  </figcaption>
</figure>

Upvotes: 0

Views: 69

Answers (1)

Jay
Jay

Reputation: 792

If you put float: left;

On the image, this solves the problem like so;

.main-image img {
float: left;
}

Thanks

Upvotes: 1

Related Questions