解决div里面img的缝隙问题

img在网页中直接放的话,底部会有一个很小的缝隙,解决方法


  第一,给图片img标签display:block。

  img{display:block}

  第二,定义容器里的字体大小为0。

  div {

  width:110px;

  border:1px solid #000000;

  font-size:0

  }

  第三,定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top

  img{vertical-align:bottom}

  其他还有把图片下边距设为负值和改写HTML标签的排列。我觉得前三种就完全可以解决了。

  造成图片在IE下与容器下边界有空隙的原因


  图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。

  至于这里的HTML属性align=”center”(对于图片浏览器会处理成align=”middle”),就相当于vertical-align:middle; 所以道理也是一样的,只要vertical-align不取baseline,这个空隙就消失了。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,854评论 1 92
  • 这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 1,324评论 0 3
  • 春节马上就过去了,春节一年又开始忙碌了,节日吃的好好,又胖三斤!苦逼上班的日子又开始了。 上班,人们见面...
    狼刀阅读 149评论 0 0
  • 湖光灯影,垂柳摇曳,独自漫步西湖苏堤,不觉有些惆怅。想打个电话给某个朋友,却想不到打给谁,突然感悟,是不是自己的知...
    Frank7阅读 166评论 0 0
  • 我这个人没别的坏毛病,就是懒。 额关于偷懒的话我发表下我的意见: 第一,想偷懒还得本身硬,就算你偷懒舍不得赶你走啊...
    华而又实阅读 238评论 0 0