（标注 文章来源 http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/）

1.块级元素(block_element)中插入一个内联块级元素(inline_block)img后,产生多余间隙

（间隙存在原因说明：对于内联块级元素img默认对齐方式是基线baseline, 可以想象在line-boxes行框盒子中存在出图片外的匿名inline-box盒子包裹文本。

文本存在line-height，所以存在间隙）

代码截图如下：

2.消除图片底部间隙几种方法

a.图片与底线对齐

b.图片元素块状化-无基线对齐

c.行高足够小，基线上移

d.消除隐匿文本字体大小

源码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .content {

             background-color: #ccc;

             margin-bottom: 5px;

             font-family: "microsoft yahei";

         }

         .vertical_align>img {

             vertical-align: top;

         }

         .elem_block img {

             display: block;

         }

         .content span {

             display: inline-block;

             background-color: #F93636;

         }

         .line_height_small {

             line-height: 0;

         }

         .box {

             font-size: 0;

         }

         .inlie_block {

             display: inline-block;

         }

     </style>

 </head>

 <body>

     <p class="content ">

         <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

     </p>

     <p class="content vertical_align">

         <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>

     </p>

     <p class="content elem_block">

         <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>

     </p>

     <p class="content line_height_small">

         <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>

     </p>

     <p class="content box">

         <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>

     </p>

     <p class="content inlie_block">

         <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><span>XYZ:行高与图片 隐匿文本节点</span>

     </p>

 </body>

 </html>

【资料参考】

http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

line-height行高与图片的隐匿文本间隙消除方法的更多相关文章

  1. wpf datagrid row height 行高自动计算使每行行高自适应文本

    wpf 的datagrid的行高 要么是Auto,要么是定值:但会带来麻烦就是每行行高都一样. 当需要按内容(主要是wrap 换行的textbox或textblock)来动态调整行高的时候,需要用到d ...

  2. cssline-height行高 全解

    1.  基线.底线.顶线 2.  行距.行高 3.  内容区 4.  行内框 5.  行框 元素对行高的影响 扩展阅读 1.  基线.底线.顶线 行高指的是文本行的基线间的距离. 基线并不是汉字的下端 ...

  3. css中的行高line-height

    “行高”顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字 ...

  4. 【转】css行高line-height的一些深入理解及应用

    一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

  5. css - 行高

    css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...

  6. POI精确设置Excel的行高和列宽

    EXCEL的行高度和列宽度单位是不一样的. 1,EXCEL列高度的单位是磅,Apache POI的行高度单位是缇(twip): 1英寸=72磅=25.4毫米=1440缇1磅=0.353毫米=20缇 P ...

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

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

  8. 27.openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽

    openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽 from openpyxl import Workbook,load_workbook from openpyxl.dra ...

  9. 理解css行高（line-height）

    首先我们要明确 line-height 的定义,line-height指的是两条文字基线之间的距离. 行内框盒子模型 所有内联元素的样式表现都与行内框盒子模型有关.所以这个概念是非常重要的. < ...

随机推荐

  1. TortoiseSVN Clean up 失败的处理方法

    当使用 TortoiseSVN 下载项目失败之后,重新下载之前需要 Clean up,在 TortoiseSVN 中 Clean up 总是失败.   在命令行行中执行 svn cleanup 就成功 ...

  2. ExtJs4 基础必备

    认识ExtJs的开发包 下载路径:http://www.sencha.com/products/extjs/download/ 解压有20多兆,别怕,真正运行的没这么大.认识下这个包的文件结构吧. b ...

  3. 字典 Key值转换为数组

    public static string[] GetCategories() { Dictionary<string, int> itemMap = new Dictionary<s ...

  4. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  5. git与svn, tfs等源代码管理器的协同

    简单地说,这三个都是业界知名的源代码管理器.他们是有区别的,根本的区别在于git是分布式源代码管理器(每个本地都有完整的代码,及历史),而svn和tfs是集中式源代码管理器(只有服务器才有完整的历史, ...

  6. 搭建GoldenGate的单向复制环境

    配置环境: 建议在相同版本OGG(即Oracle GoldenGate)之间进行复制,我在这里之所以选择不同版本的OGG,便于后续的比较学习. 一.准备OGG的运行用户 在这里,我直接使用oracle ...

  7. T-Sql（六）触发器（trigger）

    不知不觉讲到触发器了,一般我们做程序的很少接触到触发器,触发器的操作一般是DB人员来完成. 然而有的时候一些简单的业务需要我们自己去完成,不能每次都去麻烦DB人员,所以说,编程人员要全才,除了编程以为 ...

  8. C# 提取Word文档中的图片

    C# 提取Word文档中的图片 图片和文字是word文档中两种最常见的对象,在微软word中,如果我们想要提取出一个文档内的图片,只需要右击图片选择另存为然后命名保存就可以了,今天这篇文章主要是实现使 ...

  9. jQuery的事件模型

    前几天自己着重读了jQuery1.11.1的源码,又结合了之前对DE事件模型的分析,最后也实现一个简陋的事件模型. jQuery的事件系统离不开jQuery的缓存系统. jQuery的第一代缓存是直接 ...

  10. 【JUC】JDK1.8源码分析之ConcurrentSkipListSet（八）

    一.前言 分析完了CopyOnWriteArraySet后,继续分析Set集合在JUC框架下的另一个集合,ConcurrentSkipListSet,ConcurrentSkipListSet一个基于 ...