html - Chrome での画像の横の余白

Question

<div>
  <img src ='image.png'  style="display: block" />
</div>

Chrome では、これにより画像の右側に 1 ピクセルのマージンがレンダリングされ、ラッパー div が押し出されます。マージンを削除するには？

Answer 1

以下に示すように、スタイル属性でマージンとパディングを使用します。

<div>
  <img src ='image.png' style="display: block; margin: 0px; padding: 0px;" />
</div>

これに加えて、スタイルを追加して境界線を削除することもできます"border:0px"。

私はそれを試していません、それがうまくいくかどうか私に知らせてください。

Answer 2

CSSを使用してそれだけを削除すると、他のブラウザではWebサイトの外観が変わります。CSSリセットを使用して、すべてのブラウザで同じフォーマットを取得することをお勧めします。

次のようにCSSをリセットします：http： //meyerweb.com/eric/tools/css/reset/

Answer 3

この動作は Safari でも見られました。これを試して。

<div class="group-holder" style="display: table;">
  <img src="myimage1.gif" style="display: table-cell;" />
  <img src="myimage1.gif" style="display: table-cell;" />
  <img src="myimage1.gif" style="display: table-cell;" />
</div>

これは私にとってはうまくいきました。