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

カレンダーDate: | カテゴリーCategory:WordPressテーマのカスタマイズ方法【HTML・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;を指定することです。

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply

flight