zoukankan      html  css  js  c++  java
  • <img>元素底部为何有空白及其解决方案

    一、为什么<img>元素底部会有空白?

      要理解这个问题,首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline,这是一个西文排版才有的概念。

      vertical align的有效取值为baselinesubsupertoptext-topmiddlebottomtext-bottomlength,或者是 value in percentage

      (1)Baseline:vertical-align的默认值为baseline(如果没有声明)。 图像将与文本基线处的文本对齐。

      请注意,字母会下降到基线以下(比如字母p 、q、g 下面的小尾巴)。 图像则不会与字母的最低点对齐,因为那不是基线(而是基线以下)。

      (2)Middle:垂直对齐最常见的用法是在图标大小的图像上将其设置为middle,浏览器可以很好的将图像与文本垂直对齐:

      (3)Text-bottom:与bottom不同,这个是文本的底部,下降到了最下方,图像也可以与此位置对齐:

      (4)Text-top:与文本底部相反,这个代表文本顶部,即当前字体大小的最高点。 您也可以与这个位置对齐

      (5)Top & Bottom:topbottom作用类似于text-toptext-bottom,但它们不受文本约束,而是在该行上的所有内容(如另一个图像)。 因此,如果同一行上有两个不同高度的图像,并且都大于该行上的文本,则它们的顶部(或底部)将与文本大小无关。

      (6)Sub & Super:supersub代表上标和下标,因此与这些方法对齐的元素也是一致的:

    image.png

      所以,baseline 和 bottom 之间有一定的距离。实际上,inline 的图片下面那一道空白正是 baseline 和 bottom 之间的这段距离。即使只有图片没有文字,只要是 inline 的图片这段空白都会存在。

    二、总结的解决方案

      1、将图片转换为块级对象可去掉下边空白

      即设置img为:display:block;

      2、设置图片的垂直对齐方式

      即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以去掉下边空白。

      3、设置父对象的文字大小为0px

      即在父对象中添加一行:font-size:0;可以解决空白问题,但这也引发了新的问题,在父对象中的文字都无法显示,就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

      4、设置图片的浮动属性也可去掉空白

      即设置img元素float,如果要实现图文混排,这种方法是很好的选择。

      5、设置父对象行高为0

      top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0,那么 baseline 与 bottom 之间的距离也变为0,那道空白也就不见了

      6、改变父对象的属性

      如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置:overflow:hidden;来去掉空白

  • 相关阅读:
    【流量劫持】SSLStrip 终极版 —— location 瞒天过海
    【流量劫持】沉默中的狂怒 —— Cookie 大喷发
    【流量劫持】SSLStrip 的未来 —— HTTPS 前端劫持
    Web 前端攻防(2014版)
    流量劫持 —— 浮层登录框的隐患
    流量劫持能有多大危害?
    流量劫持是如何产生的?
    XSS 前端防火墙 —— 整装待发
    XSS 前端防火墙 —— 天衣无缝的防护
    XSS 前端防火墙 —— 无懈可击的钩子
  • 原文地址:https://www.cnblogs.com/goloving/p/8526095.html
Copyright © 2011-2022 走看看