コニファ・ロゴ

ツール集:CSS marginの再確認・画像右側、下側にできる余計な空間に対処

普段、画像などを並べたりしていて、余計な空間や隙間が予期せずできることがあります。多くは要素相互の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

align

サンプル:vertical-align: middle

align

サンプル: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; 
	}

 

 

 

 

戻るボタン