Blogブログ

TORAT | 2015.9.15

リスト横並びで画像を並べた時の隙間を消す

  • css
  • html

リスト横並びで画像を並べた時、display:inline;を指定して水平に並べた場合、要素と要素の間に隙間が生じます。
これは空白類文字といって、ソースコード内の改行は半角スペースくらいの空白に変換するそうです。

1. <li>タグを改行せず、一行に並べる

2. <li>タグの間にコメントタグを入れる

3. </li>の閉じタグを途中で区切る

4. display:inline;をやめて、float:left;で横並びにする

5. display:table-cell;で横並びにする

display:table-cell;はIEでは対応していない為、モダンブラウザとIEで記述を分けなければならない。

6. font-sizeで隙間を消す

横並びの要素を包括する要素にfont-size:0;を指定すれば、隙間は消えます。<li>を横並びにするなら、<ul>にfont-size:0;

この記事を書いた人

TORAT 管理者

関連記事

ブログ一覧へ

Recommend愛されているブログ