画像をli(リスト)タグで並べたときの余白を消すCSS記述。

画像同士に隙間が!そんなときの処方箋。

画像同士の隙間イメージ

画像を<ul>・<li>タグで並べて、いざブラウザで表示したら、左記のような隙間ができてしまった!

<ul>や<li>にも<img>にも、margin:0;とpadding:0;を効かせているし、念のため、<li>と<img>のheightも同じにしたのに、おかしい。

こんな場合に、CSSに記述すべきプロパティと値は、何なのでしょうか?

余白の原因は、<li>と<img>の垂直ラインのズレ。

imgはインライン要素です。
なので、画像が配置される垂直位置は、親要素(この場合は<li>)のベースラインになります。

で、このラインのズレが、結果として画像の下に余白を生み出しています。

そして、垂直ラインをそろえる、vertical-alignを<img>に指定をしてあげれば、余白が消えます。

画像の隙間を埋める、HTMLとCSSソース。

具体的なソースの例は、下記のとおりになります。

◆HTML

<ul>
 <li><img src=”画像のパス/navi01.gif” alt=”navi01″ width=”●●” height=”●●” /></li>
 <li><img src=”画像のパス/navi02.gif” alt=”navi02″ width=”●●” height=”●●” /></li>
 <li><img src=”画像のパス/navi03.gif” alt=”navi03″ width=”●●” height=”●●” /></li>
</ul>

◆CSS

ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul li img {
  vertical-align: bottom;
}

ポイントは、vertical-align: bottom;を指定することです。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply