font-size:0清除display:inline-block元素换行符间隙,比如两个img标签之间有换行符

行内元素的高度是由其行高决定的。

Div或者其他元素内的图片,底部会有间隙,原因是图片是inline-block元素,默认与文字的基线对齐,文字的基线距离文字所在的lineline-boxes底部还有一段距离(行高的最底部),所以图片底部会出现间隙,(如果没有文字,可以认为存在隐匿文本节点,与真实文字的作用相同)解决方案:

1、 图片display:block,此时vertical-align不起作用或者说设置block之后文字已经另起一行了

2、 图片vertical-align:bottom,与文字所在区域的底部对齐

3、 设置父元素line-height:0,内部文字继承父元素的行高,其高度为0,也就不会对图片产生影响了。

line-height的理解的更多相关文章

  1. Backtracking line search的理解

    使用梯度下降方法求解凸优化问题的时候,会遇到一个问题,选择什么样的梯度下降步长才合适. 假设优化函数为,若每次梯度下降的步长都固定,则可能出现左图所示的情况,无法收敛.若每次步长都很小,则下降速度非常 ...

  2. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  3. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  4. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  5. CSS——对height和line-height的理解

    最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...

  6. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  7. CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

  8. 深入理解BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  9. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  10. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

随机推荐

  1. BF字符串匹配算法

    Brute Force算法是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串T的第一个字符进行匹配,若相等,则继续比较S的第二个字符和 T的第二个字符: 若不相等,则比较S的第二个 ...

  2. Android驱动中的remap_pfn_range()校验漏洞(CVE-2013-2596)

    简单介绍 当然类似函数还有io_remap_pfn_range(). remap_pfn_range() 为用户态提供了一种手段访问内核地址空间.它通过新页表,将一块内核物理内存映射到用户态进程空间. ...

  3. bootstrap 4 移除Glyphicons

    /********************************************************************** * bootstrap 4 移除Glyphicons * ...

  4. Python之路,第十九篇:Python入门与基础19

    python3  面向对象3 数值转换函数重载: str(obj)              __str__ complex(x)       __complex__ int(obj)         ...

  5. Linux用管道命令对文件的移动

    我的问题是这样的:我有一个文件夹,里面有大约有1000个文件,然后我想把这样的一部分文件给随机分成两部分,一部分含有100张,另外一部分含有剩下的所有的文件,这个时候如果是在Linux图形界面的话直接 ...

  6. TJU Problem 2101 Bullseye

    注意代码中: result1 << " to " << result2 << ", PLAYER 1 WINS."<& ...

  7. 字符串(text)格式的html代码文本转为DOM对象

    /*字符串转dom对象*/ window.strimgTurnDom = function(txt) { try //Internet Explorer { xmlDoc=new ActiveXObj ...

  8. Promise-js中的同步和异步

    js中的同步和异步   自从读了研后,走上了学术之路,每天除了看论文就是做实验,最后发现自己还是喜欢开发呀,于是我又重回前端啦~ 隔了这么久没学前端,好像很多东西都忘了不少,而且不得不说前端的技术更新 ...

  9. Sencha Touch app example -- oreilly app 分析

    from: 2013/8/30的笔记 使用development.js 读取 app.json 配置文件 app.json 配置了app.js文件 app.js lauch function ,首先用 ...

  10. 芯灵思SinA33开发板怎样安装虚拟机

    芯灵思SinA33开发板怎样安装虚拟机 今天入手一块芯灵思的开发板,型号为SIN-A33,用的是全志的A33芯片,与其它开发板不同的是, 芯灵思开发板手册上用来搭建开发环境的linux系统是cento ...