画像に隙間ができる問題を解決する
こんにちは。ビースマイル東中島のYです。
私がホームページ制作している時にちょっとハマったので備忘録として紹介します。
画像の下に生じる隙間を解消する
html上にimg要素として画像を配置する際、画像はそのまま表示すると、勝手に隙間が生じることがあります。
marginでもpaddingでも解消できません。
↑隙間が空いています
今回はこの謎の隙間を無くす方法をご紹介したいと思います。
CSSコード例
なぜ隙間ができるのか
画像（img要素）に対して余白ができる原因は、画像はインライン要素で、
インライン要素の初期値は「vertical-align: baseline;」ということになっています。そのことが隙間ができる原因です。
この問題の解決方法
この隙間を消すにはvertical-alignプロパティを指定します。
CSS
↑隙間が無くなりました。
今回の値には「bottom」を指定していますが、「top」や「middle」でも大丈夫です。
改行による隙間を解消する方法
HTMLのimg要素やp要素にはフローコンテンツ、記述コンテンツ、セクショニングコンテンツなど、それぞれの要素が属する「カテゴリー」があります。
これらのうちフローコンテンツ（インライン要素）は記述したソースに改行がある場合、ブラウザで表示するとソースの改行がそのまま表示されてしまうため隙間ができてしまうという事です。
例えば、次のようなHTMLを記述したとします。
HTMLコード例
</body>
こちらをそのまま表示すると、次のように画像と画像の間に隙間ができます。
この現象を回避するには、HTMLコードにある改行を直接削除することで隙間を無くします。
HTMLコード例
</body>
改行を削除しただけですが、ブラウザに表示すると隙間は消えています。
BeSmile東中島は、大阪市東淀川区にある就労継続支援A型事業所です。
HP・イラスト・WEBデザイン・DTMなど鋭意製作中です!
内職・施設外就労での皆さんも、頑張っております！
