仕事で使っているWebやシステム開発関連の情報を掲載しています。開発に使用するソフトウェアの使用方法やシステム開発に必要な技術的情報。トラブル解決方法等を掲載してるサイトです。すなりんimg要素として画像を配置して、marginやpaddingを0に指定しているのにも関わらず画像の下に余計なスペース(空行みたいなもの)が表示されてしまう。ブラウザのデバッグモードでも原因がわからないいし、改行や空白を消しても解消されません。今回は簡単になおせる方法を紹介しています。画像(img要素)に対して余白ができる原因は、画像を含むインライン要素が、ベースラインに配置されているためです。baseline;」が指定されており、そのことがこの隙間ができる原因となっています。解決方法1(推奨方法)vertical-alignにbaseline以外のものを指定することで解決します。img{vertical-align:top;}サンプルは「top」で指定しましたが、「middle」や「bottom」などを指定しても問題ありません。画像の下の余白は、ハマる原因でもあるので、imgの「vertical-align」の指定はかならずしておくことをお勧めします。bottomどのパターンを主に使うか考慮してimgに事前に「vertical-align」の指定をしておくと思わぬことで時間を使わなくて良いかもしれません。baselineの説明vertical-alignは、行内やセル内の縦方向の揃え位置(ベースライン)を調整できるプロパティです。何も指定しない場合は、baselineが設定されます。ブロック要素には使用できません。img要素は、インライン要素になります。baselineは、line-heightと関係があります。line-heightは行間が指定できるプロパティですが、文字の上下に行間をつくるため余白が作られます。そのため、baseline上に配置された画像の下に余計な空白が生まれてしまいます。