zoukankan      html  css  js  c++  java
  • div之间有间隙以及img和div之间有间隙的原因及解决方法

    原因:

    div 中 存在 img标签,由于img标签的 display:inline-block 属性。

          display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一 行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行 符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。

    解决方法:

    1、把img标签的display属性改成block:

    img{dispaly:block;}

    2、把div中的字体大小设为0:

    div{font-size:0;}

    3、修改img的vertical-align属性:

    img{vertical-align:buttom;}
    img{vertical-align:middle;}
    img{vertical-align:top;}

     

     

    个人能力有限(* *),欢迎指正、交流。
  • 相关阅读:
    zoj 3693, 卡精度
    zoj 3690, 计数 dp , 快速幂
    hdu 1496,枚举
    zoj 2399, 哈弗曼编码
    poj 2560,mst
    poj 2007, 乱搞,计算几何
    bnu 29064, 期望 水题
    img,bg
    垂直居中,定位的方法
    .reverse ,join,split区分
  • 原文地址:https://www.cnblogs.com/vanstrict/p/4961300.html
Copyright © 2011-2022 走看看