34264


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

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

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

[code]

    *{
            margin:0;
            padding:0;
    }
    
[/code]

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

liの高さ：166px  
[![画像の説明をここに入力](https://i.stack.imgur.com/1G1DR.png)](https://i.stack.imgur.com/1G1DR.png)

imgの高さ：160px  
[![画像の説明をここに入力](https://i.stack.imgur.com/zco0C.png)](https://i.stack.imgur.com/zco0C.png)

[code]

    <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>
    
[/code]

[css]

[code]

    @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;*/
    }
    
[/code]


CC BY-SA 3.0
2017-04-25T05:18:16.187
34259
2017-04-25T06:48:20.593
2017-04-25T05:23:33.993
12297
12297
question
html css
liの高さが中身のimgの高さより大きくなる。

[code]

    img { vertical-align: bottom; }
    
[/code]

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


CC BY-SA 3.0
2017-04-25T06:33:37.760
34263
2017-04-25T06:33:37.760
17324
34259
answer


その縦幅のズレは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>

[code]

    @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;*/
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-04-25T06:48:20.593
34264
2017-04-25T06:48:20.593
19925
34259
answer