（标注 文章来源 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. struts1一:基本简介

    struts是开源框架.使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时间.如果我们想混合使用Servlets和JSP的优点来建立可扩展的应用,struts是一个不错的 ...

  2. 2013 duilib入门简明教程 -- 部分bug 2 (14)

        上一个教程中提到了ActiveX的Bug,即如果主窗口直接用变量生成,则关闭窗口时会产生崩溃            如果用new的方式生成,则不会崩溃,所以给出一个临时的快速解决方案,即主窗口 ...

  3. VMware Workstation and Hyper-V are not compatible. 解决方案

    VMware 和 Hyper-V 不能共存问题报错如下:VMware Workstation and Hyper-V are notcompatible. Remove the Hyper-V rol ...

  4. LINQ系列：LINQ to SQL Group by/Having分组

    1. 简单形式 var expr = from p in context.Products group p by p.CategoryID into g select g; foreach (var ...

  5. Hello World of OpenCascade

    Hello World of OpenCascade eryar@163.com 摘要Abstract:以一个经典的Hello World程序为例开始对开源几何造型内核OpenCascade的学习. ...

  6. Web APi之消息处理管道（五）

    前言 MVC有一套请求处理的机制,当然Web API也有自己的一套消息处理管道,该消息处理管道贯穿始终都是通过HttpMessageHandler来完成.我们知道请求信息存在 RequestMessa ...

  7. 前端工程优化：javascript的优化小结

     我觉得优化javascript是一门高深的学问,在这里也只能站在前人的肩膀上,说一些我浅显的认识,更希望的是抛钻引玉,如有不对,敬请斧正. 首先,要认识到是,优化js的关键之处在于,优化它的运行速度 ...

  8. 编写atoi库函数

    看到很多面试书和博客都提到编写atoi函数,在很多面试中面试官都会要求应聘者当场写出atoi函数的实现代码,但基本很少人能写的完全正确,倒不是这道题有多么高深的算法,有多么复杂的数据结构,只因为这道题 ...

  9. PHP程序员如何理解IoC/DI

    思想是解决问题的根本 思想必须转换成习惯构建一套完整的思想体系是开发能力成熟的标志 详情请点击

  10. 如何从源码中学习javascript

    艾伦说啊,学习javascript,必须要学会看源码,通过高手的源码,你可以从中吸取很多书本上难以看到的技巧. 看源码就好像喝鸡汤,所有的营养都在这汤里了.这汤就是源码,高手写的源码,就是最好的鸡汤. ...