zoukankan      html  css  js  c++  java
  • img和canvas下方会有空白的原因

    1. 首先我们要知道这部分空白产生的原因。图片默认的vertical-align是baseline,

      也就是字母x的下边距,我们在图片后面写上x就是这样

      如何解决div里面img图片下方有空白的问题?
    2.  

      如果给x加上背景色就是这样

      如何解决div里面img图片下方有空白的问题?
    3.  

      可以看到图片是与字母x的下边距对齐的,也就是baseline,css2的文档中有这么一句解释,翻译过来也就是一个inline-block元素,如果里面没有inline元素,或者overflow不是visible,则该元素的基线就是其margin底边缘,否则,其基线就是元素里面最后一行内联元素的基线。

      如何解决div里面img图片下方有空白的问题?
    4.  

      所以我们只需要将img图片display:block,即可去掉div和img之间的空白

      如何解决div里面img图片下方有空白的问题?
    5.  

      或者将div的line-height设置得足够小,也可以去掉空白,例如div{line-height:5px;}

      如何解决div里面img图片下方有空白的问题?
    6.  

      也可以将font-size设为0,实际上也是改变了line-height

      如何解决div里面img图片下方有空白的问题?
    7.  

      当然,我们可以改变vertical-align,让它不是baseline,比如设置vertical-align:middle

      如何解决div里面img图片下方有空白的问题?

    总结一下原因就是img元素默认的vertical-align是baseline,也就是图片底部和旁边的文字底部对齐,canvas也是图片,可以看到右键也有图片另存为,只不过canvas可以通过js绘图,所以canvas也有这个问题,解决方法可以设置为块状元素,或者vertical-align:middle/bottom,或者设置字体大小或者行高来去除这个空白间

    http://jingyan.baidu.com/article/7082dc1c69dc6fe40a89bdfe.html

  • 相关阅读:
    windows环境变量
    软件工程的一般过程和需要的文档
    linux find 命令查找文件和文件夹
    mybatis中mapUnderscoreToCamelCase自动驼峰命名转换
    人体湿气重有哪些表现? 细数湿气重的危害
    MySQL升级后1728错误解决方案
    linux清理Java环境
    无线投屏PC投电视
    report studio 交叉表占比
    Cognos审核模块的导入与设置
  • 原文地址:https://www.cnblogs.com/qdog/p/7084287.html
Copyright © 2011-2022 走看看