zoukankan      html  css  js  c++  java
  • 切图相关记录

    问题如图片一,还原设计图时,出现空隙

    解决方案:思路,div和img去掉border,然后对应的边距都设置为0,图片设置为块级元素,会自动沾满div的空间。

    .fgw-p-m-0{
      padding: 0!important;
      margin:0 !important;
      img{
        display: block;
      }
    }
    
    
    
     <div>
                                <div className="fgw-p-m-0">
                                    <img src="/static/image/heard.png" alt=""/>
                                </div>
                                <div className="fgw-p-m-0">
                                    <img src="/static/image/green.png" alt=""/>
                                </div>
                                <div className="fgw-p-m-0">
                                    <img src="/static/image/yellow.png" alt=""/>
                                </div>
                                <div className="fgw-p-m-0">
                                    <img src="/static/image/gray.png" alt=""/>
                                </div>
                                <div className="fgw-p-m-0">
                                    <img src="/static/image/footer.png" alt=""/>
                                </div>
                            </div>

    解决后的效果图

    解决方案二和三(在块级元素上设置font-size:0  或者 使用line-height:0)

    .fgw-p-m-0{
      line-height: 0;
      img{
        /*display: block;*/
      }
    }

  • 相关阅读:
    java--volatile关键字
    java--线程异常处理器
    java--线程池
    Supervisor安装和使用
    网络协议--HTTP
    1.Nginx简介
    Nginx配置实战
    Redis面试题
    SpringBoot--集成swagger2
    缓存的优缺点
  • 原文地址:https://www.cnblogs.com/zxyun/p/7161823.html
Copyright © 2011-2022 走看看