图片底部留有间隙的问题实例页面

展示

间隙示意：

图片block块状清除间隙：

容器line-height:0清除间隙：

容器font-size:0清除间隙：

图片vertial-align设置清除：

代码

• HTML：

  <h4>间隙示意：</h4>
  <div class="box">
      <img src="1.jpg">
  </div>
  <h4>图片block块状清除间隙：</h4>
  <div class="box box-1">
      <img src="1.jpg">
  </div>
  <h4>容器font-size:0清除间隙：</h4>
  <div class="box box-2">
      <img src="1.jpg">
  </div>
  <h4>图片vertial-align设置清除：</h4>
  <div class="box box-3">
      <img src="1.jpg">
  </div>

• CSS：

  .box {
      width: 280px;
      outline: 1px solid #aaa;
  }
  .box img {
      height: 96px;
  }
  /* 间隙清除方法 */
  .box-1 img {
      display: block;
      margin: auto;
  }
  .box-2 {
      line-height: 0;
  }
  .box-3 {
      font-size: 0;
  }
  .box-4 img {
      vertical-align: bottom;
  }