普段、画像などを並べたりしていて、余計な空間や隙間が予期せずできることがあります。多くは要素相互のmarginやpaddingの影響や勘違いですが、中には意味が分からないものがあります。

サンプルは、横200px、縦100pxの画像を3つ並べていますが、marginやpaddingの指定無しで、各画像の右側、下側に意味不明な空間ができています。なお、このページの動作は、Windows10のEdgeとIE11、Windows8.1のIE11、MacのSafari9、Safari5、Google Chrome46、Firefox41で確認しています。

htmlソース

<div class="main"> <div class="wrap"> <img class="img01" src="img2/sample-01.gif"> <img class="img02" src="img2/sample-02.gif"> <img class="img03" src="img2/sample-03.gif"> </div> </div>

画像右側の空間を取り去る

全称セレクタやbody、その他親要素などに、余計なmarginやpaddingの指定が無いか確認します。次に問題の要素が、上のhtmlソースのようにimgタグが改行されているかを確認します。もしそうなら、次のように改行せずに並べることで、余計な右側の空間をなくすことができます。改行コードが影響しているようです。

htmlソース（修正）

  <div class="main">
      <div class="wrap">
          <img class="img01" src="img2/sample-01.gif"><img class="img02"　
	  src="img2/sample-02.gif"><img class="img03" src="img2/sample-03.gif">
      </div>
  </div>

また、何らかの理由で、改行したままにしたい場合、各imgのCSS指定でネガティブmarginで余計な空間を消し、左へのずれをpositionで戻す、という方法でも同様になります。ただ、横サイズがほんの少しですが小さくなります。

htmlソース（ネガティブmarginによる修正）

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

 

追記：現在（2018年）は、もっと簡単な方法が見つかっています。

 

続いて画像下側の空間を取り去る

インライン要素やテーブルセルに有効なvertical-alignの指定ですが、これを記述しない場合、デフォルトの「vertical-align:baseline」が適用されています。このbaselineは、テキストのベースラインに画像（下側）とテキストを並べます。

テキストのベースラインというのは、配置する空間の最下段では無く、欧文テキストを基準にして、yやgなどに見られるベースラインの下にはみ出すデセンダー部分がその下にあります。普段、日本語テキストばかりを使っているとデセンダーをあまり意識せず忘れがちですので、ブラウザが仕様どおりにこのデセンダーを画像の下側に表示するのを見て、首を傾げることになります。（次のサンプル上側）。非表示のデフォルトでは無く、明示的に「vertical-align:baseline」と書かれていればすぐに気づくのですが。

ですので、このvertical-alignの値をbaseline以外のtop、middle、bottomなどに指定することで、下側の余計と感じてしまう空間を消すことができます（次のサンプル下側）。

なお、画像右側のテキストは比較のため便宜的に入れているもので、テキスト無しの画像並べを想定しています。

サンプル：vertical-align: baseline

サンプル：vertical-align: middle

サンプル：vertical-align: baselineのCSSソース

  .wrap3 img  {
	margin:0;
	padding:0;
	vertical-align: baseline; /* デフォルト */
	}

サンプル：vertical-align: middleのCSSソース

  .wrap3 img  {
	margin:0;
	padding:0;
	vertical-align: middle; 
	}