2

liの高さが中身のimgの高さより大きくなりますが
なぜなのでしょうか?

インスペクターでも
高さが166になっています。

中身の画像の高さは160pxなのに、
liの高さは166pxになってしまいます。

*{
        margin:0;
        padding:0;
}

として、リセットしてもいるのですが。

liの高さ:166px
画像の説明をここに入力

imgの高さ:160px
画像の説明をここに入力

<ul class="box">
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
      <li><img src="image.png" alt=""></li>
  </ul>

[css]

@charset "UTF-8";
/* CSS Document */

*{
        margin:0;
        padding:0;
}

ul,li{
    list-style: none;
}

li{
    /*height: 160px;*/
}

#wrap{
    width: 960px;
    margin: 0 auto;
    background: yellow;
}

#header{
    background-color: #f00;
}

#footer{
    background-color: #00f;
    clear: both;
}

.box li{
    float: left;
    /*margin-right: 20px;
    margin-bottom: 20px;*/
}

2 件の回答 2

5

その縦幅のズレはpaddingやmarginによるものではありません。
フォントのベースラインから下端にかけて含まれるスペースによるものです。
フォントに依存するのでliタグのfont-familyを変えると縦幅のズレも変化します。

この隙間を無くす簡単な方法は2通りあります。

  1. imgタグをブロック要素にする
  2. imgタグのvertical-alignを行ボックスを基準にした属性(top, middle, bottomの何れか)にする

li タグ内が示されたコードのようにimgタグ一つであれば1で解決できます。
下記のスニペットに示しましたのでご参考ください。

もしimgタグ一つでなければ、どのようにしたいかによって解決方法が変わってくると思いますが、大抵は2のvertical-alignの指定で対応できると思われます。

参考:http://www.htmq.com/style/vertical-align.shtml

@charset "UTF-8";

*{
  margin:0;
  padding:0;
}

ul,li{
  list-style: none;
}

li img {
  display: block;
}

#wrap{
  width: 960px;
  margin: 0 auto;
  background: yellow;
}

#header{
  background-color: #f00;
}

#footer{
  background-color: #00f;
  clear: both;
}

.box li{
  float: left;
  /*margin-right: 20px;
  margin-bottom: 20px;*/
}
<ul class="box">
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
  <li><img src="" alt="" width=225 height=160></li>
</ul>

1
  • ありがとうございます!とても勉強になりました!
    – aqua
    Commented 2017年4月25日 8:26
1
img { vertical-align: bottom; }

上記を指定してみてください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。