css - 画像の下と上の空白を取り除くにはどうすればよいですか

Question

周囲に境界線がある画像があり、コードは次のようになります。

img{
 display: block;
 border: 2px solid #000;
 height: 140px;
 width: 200px;
 padding: 0;
}

<img src="pathtoimage.png" alt="product name" />

上下の境界線と画像の間に高さ 1 ピクセルの小さな白い隙間があります。コンテナに画像を入れてボーダーをコンテナに設定してみましたが、やはり隙間ができてしまいます。位置を絶対および相対に設定しようとしましたが、うまくいきませんでした。css3 の box-size を使ってみましたが、うまくいきませんでした。

任意の提案をお願いします。

Answer 1

コードはそのまま動作するはずです。ここにデモがあります。

問題はあなたの実際の写真だと思います。画像自体に小さな白い境界線がないことを 100% 確信していますか? に置き換えpathtoimage.pngてhttp://placehold.it/350x150、白い縁がなくなったかどうかを確認してください。

最後に、padding: 0 !important;他の場所からパディングを継承していないことを確認するように設定してみてください。

Answer 2

要素の周りには、パディング、マージン、ボーダーの 3 種類のエッジがあります。

追加：

margin: 0;

どれがどれであるかを説明する画像は次のとおりです。