img图片下面出现莫名的下边距解决办法

weixin_34261739

于 2016-11-21 17:22:00 发布

阅读量154

点赞数

原文链接：http://www.cnblogs.com/salody/p/6086186.html

版权

图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  .wrapper {
    font-size: 0;
  }
  .inner {
    display: inline-block;
  }
  img {
    width: 100px;
    height: 100px;
  }
  .test {
    font-size: 16px;
  }
  .img {
    vertical-align: top;
  }
</style>
<body>
  <div class="wrapper">
    <div class="inner img">
      <img src="1.jpg" alt="">
    </div>
    <div class="inner">
     <p class="test">Lorem ipsum dolor sit amet </p>
    </div>
  </div>
</body>
</html>