zoukankan      html  css  js  c++  java
  • <转载>解决div里面img的缝隙问题

     
    练习切图时发现img和父级div之间总是有2px空隙(chrome),上网搜索解决。
     

    图片IMG与容器下边界之间有空隙怎么办?这里介绍3种简单的解决方法。

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

    img{display:block}

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

    div{
      110px;
      border:1px solid #000000;
      font-size:0px;
    }

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

    img{vertical-align:bottom}

     

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

    造成图片在IE下与容器下边界有空隙的原因在网上搜了一下,发现old9说的图片文字等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,这个空隙就消失了。

  • 相关阅读:
    LeetCode Power of Three
    LeetCode Nim Game
    LeetCode,ugly number
    LeetCode Binary Tree Paths
    LeetCode Word Pattern
    LeetCode Bulls and Cows
    LeeCode Odd Even Linked List
    LeetCode twoSum
    549. Binary Tree Longest Consecutive Sequence II
    113. Path Sum II
  • 原文地址:https://www.cnblogs.com/minelucky/p/4746071.html
Copyright © 2011-2022 走看看