zoukankan      html  css  js  c++  java
  • css 图片有间隔多个Img标签之间的间隙

    今天写css时发现,图片加起来刚好是900px的三张图片,不能在一个900px宽容器放下,因为图片之间有间隔,我猜是浏览器把两个img标签之间的空格当成了空白节点。

    在网上找到了几个不错的解决方法:

    1.多个img标签写在一行

    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>

    效果前:技术分享

    效果后:技术分享

     

    2.在img标签的父级上写:font-size:0;//这个在解决display:inline-block出现的问题也有帮助

    <div style="font-size:0">
       <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
       <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
    </div>

    效果:技术分享

     

    3.使用display:block(img是内联元素)//要float一下才行

    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>
    <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>

    效果:技术分享

     

    4.使用letter-spacing属性

    <div style="letter-spacing:-800px"><!--letter-spacing的值无论是负多少都不会产生重叠-->
        <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
        <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
    </div>        

    效果:技术分享

     

    原文:http://www.cnblogs.com/zqzjs/p/4868325.html
  • 相关阅读:
    [色彩校正] Gamma Correction
    需要齐次坐标的原因之二 所有的变换运算(平移、旋转、缩放)都可以用矩阵乘法来搞定
    需要齐次坐标的原因之一
    数据库连接类
    简单的数组排序
    OfficePage封装代码
    新闻管理数据模板
    最新page页码生成控件代码
    新闻管理cs页面
    快速收录新域名网站
  • 原文地址:https://www.cnblogs.com/owenzh/p/11225279.html
Copyright © 2011-2022 走看看