web表示画像の右側や下に謎の隙間ができる

パソコン

★右側の隙間

  1. 全称セレクタやbody、その他親要素などに、余計なmarginやpaddingの指定が無いか確認
  2. 問題の要素が、上のhtmlソースのようにimgタグが改行されているかを確認

2．の場合、改行せずに並べることで、余計な右側の空間をなくすことができます。改行コードが影響しているようです。

上記方法でダメ場合、下記のようにimgのCSS指定をします。

img  {
	padding:0;
	margin:0 -3px;
	position:relative;
	left:3px;
	}

ネガティブmarginで余計な空間を消し、左へのずれをpositionで戻す。
（ただし、横サイズがほんの少し小さくなります。）

★下の隙間

imgのCSS指定に下記　vertical-align　を追加します。

vertical-align: bottom;
又は
vertical-align: middle;

 

■参考■
CSS　marginの再確認・画像右側、下側にできる余計な空間に対処 [株式会社コニファ]

画像の下に謎の隙間ができるのを防ぐ方法 [ホームページ作成] All About

counter