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. python 实现 KNN 分类器——手写识别

    1 算法概述 1.1 优劣 优点:进度高,对异常值不敏感,无数据输入假定 缺点:计算复杂度高,空间复杂度高 应用:主要用于文本分类,相似推荐 适用数据范围:数值型和标称型 1.2 算法伪代码 (1)计 ...

  2. triplet改进,变种

    1.一开始是FaceNet 2.一个重要的改进:image-based, Ding etal. 3.对于样本挑选的改进: 1)hard samples: hard positive 和hard neg ...

  3. DG搭建方式区分

    DG搭建三种方式: 一.异机恢复,restore database,recover database 二. duplicate target database for standby from act ...

  4. 面向对象ZJ

    面向对象: 对象: 万事万物皆为对象. 特征, 动作或功能放在一起的就是一个对象 对象如何创建的. 在python中对象是通过类来创建的. 类是对对象的描述.统称.约束. class Car: def ...

  5. fckeditor配置

    <!DOCTYPE html> <html > <head> <title>发布</title> <meta name="v ...

  6. Angular 手动解析表达式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. jQuery事件委托方法 bind live delegate on

    1.bind    jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法:  bind(type,[data],function(e)); 特点: a.适合页 ...

  8. Thread sleep() wait()

    学艺不精,先总结一下两者的区别: 对比项 wait sleep 类所属 Object Thread,static方法 使用 在synchronised block中(包括notify,notifyAl ...

  9. 每天进步一点点-Java IO操作-Java Serializable（对象序列化）的理解和总结

    往硬盘文件里写数据 序列化:序列化是将对象转换为容易传输的格式的过程.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.在另一端,反序列化将从该流重 ...

  10. Commons工具包的使用

    使用步骤: 1.Java  Project下新建Folder文件夹,命名lib 2.lib文件夹下把Commons-io-2.4jar包复制进去 3.右键Commons-io-2.4jar包,点击Bu ...