制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングCSS画像の下に出来る余白を消す[html]

画像の下に出来る余白を消す[html]

2013年12月14日CSS 
画像の下に出来る余白を消す[html]記事のアイキャッチ画像

HTMLコーディングの時に画像の下に勝手に余白が入る現象の対処法を紹介します。

まえがき

コーディング作業中に画像の下に謎の余白ができることがあります。
その余白を消す方法のご紹介です。

画像の下に余白ができる状況1

いろいろあると思いますがKoToRiの場合、下記のコードで起こりました。

        <ul>
        	<li><img src="image.gif" alt="" /></li>
        </ul>

ブラウザで確認すると

画像の下に余白1

こんな感じです。
謎ですね。
この場合、img要素に「vertical-align」を指定してあげれば無くなります。

li img{
	vertical-align:top;
}

このように指定すると余白が消えます。

画像の下に余白3

画像の下に余白ができる状況2

上で紹介した事例ともう一つ画像の下に謎の余白ができる状況があります。

        <div><img src="image.gif" alt="" />aaa</div>

divの中に画像とテキストを直書きするとこうなります。

画像の下に余白2

余白あいてますね~。
これも上で紹介したように「vertical-align」を指定すれば無くなりますが指定する値が「top」か「bottom」かによってテキストの入り方が違ってきます。

「vertical-align:top;」の場合
画像の下に余白4

「vertical-align:bottom;」の場合
画像の下に余白5

「vertical-align:middle;」の場合
画像の下に余白6

状況によって使い分けてください。

まとめ

KoToRiも昔はこういうCSSの問題ですごく躓きました><
こういうCSS関連のこともどんどん記事にしていきたいと思います。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント