キャプションと画像の間に約1-2ピクセルのギャップがあるのはなぜですか？

Question

私は何かマージンを見つけることができないので、私は原因が何であるか、それをどのように除去するのか混乱しています。あなたは、画像を見ることはできませんが、キャプションとイメージとのギャップに灰色の境界線を見ることができますが、画像ではfloat: left;

を入れた場合は、まだ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>

Answer 1

、このそういう問題を解決する。

.main-image img { 
float: left; 
} 

おかげ