zoukankan      html  css  js  c++  java
  • css多个img标签存在间隙的解决方法总汇

    写css时发现,图片加起来刚好是900px的多张图片,不能在一个900px宽容器放下,因为图片之间有间隔,我猜是浏览器把两个img标签之间的空格当成了空白节点。  在网上整理了一些解决多个img标签存在间隙的方法。

    1、多个img标签写在一行

    <img src="/i/eg_tulip.jpg" height="100px"/><img src="/i/eg_tulip.jpg" height="100px"/>
    

      

    2.将要闭合标签的地方与开始标签的地方重合  

    <img src="/i/eg_tulip.jpg"   height="100px"/><!--
    --><img src="/i/eg_tulip.jpg"  height="100px" />
    

      

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

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

      

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

    <img src="/i/eg_tulip.jpg"  height="100px" style="display:block;float:left"/>
    <img src="/i/eg_tulip.jpg"  height="100px" style="display:block;float:left"/>
    

      

    Pexelshttps://www.wode007.com/sites/73241.html 天堂图片网https://www.wode007.com/sites/73243.html

    5.将要闭合标签的地方与开始标签的地方重合

    <img src="/i/eg_tulip.jpg"   height="100px"
    /><img src="/i/eg_tulip.jpg"   height="100px" />
    

      

    6.使用letter-spacing属性

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

      

     
  • 相关阅读:
    ZINTERSTORE — Redis 命令参考
    Wombat vim colorscheme – customized Chronosbox
    我的vim colorscheme 白色之夜 博客园
    Python list of class attributes Python
    vim配色方案colorscheme设置
    colorscheme install
    Python类中的私有成员(私有函数,私有变量)
    Pebble Overview
    用python 发送邮件
    Python发送带附件的Email
  • 原文地址:https://www.cnblogs.com/ypppt/p/13326241.html
Copyright © 2011-2022 走看看