（标注 文章来源 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. PDO 数据访问抽象层

    1.操作其它数据库 (1)造对象 $dsn = "mysql:dbname=test3;host=localhost"; //数据源:两个参数:数据库驱动,链接数据库 $pdo = ...

  2. Security7：View Usage

    一,在Database level上,主要有 sys.database_principals, sys.database_permissions 和 sys.database_role_members ...

  3. 【WP开发】读写剪贴板

    在WP 8.1中只有Silverlight App支持操作剪贴板的API,Runtime App并不支持.不过,在WP 10中也引入了可以操作剪贴板的API. 顺便说点题外话,有人会说,我8.1的开发 ...

  4. 解读sencha touch移动框架的核心架构(二)

    本来这行要详解Ext.extend的,但是发现网站有很详细的,那么就跳过去吧 为保持一个系列的分析,还是先搬过来吧,下章开始分析Ext4.0的新架构 在Java中,我们在实现继承的时候存在下面几个事实 ...

  5. JS preventDefault ，stopPropagation ，return false

    所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件.监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件.浏览器的默认事件:特定页面元素上带的 ...

  6. jquery $.each的用法

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) ...

  7. 借助node实战WebSocket

    一.WebSocket概述 WebSocket协议,是建立在TCP协议上的,而非HTTP协议. 如下: ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求. 注:w ...

  8. java 导出数据为word文档（保持模板格式）

    导出数据到具体的word文档里面,word有一定的格式,需要保持不变 这里使用freemarker来实现: ①:设计好word文档格式,需要用数据填充的地方用便于识别的长字符串替换  如  aaaaa ...

  9. 编写简单的ramdisk（无请求队列）

    最近在研究块设备驱动的编写,看了赵磊大牛的<写一个块设备驱动>,受益匪浅,虽然能看懂里面说的,但动手写写代码还是能加深理解的,下面实现的ramdisk写的很简单,如果有错误,欢迎大牛们指正 ...

  10. 基础知识javascript--事件

    群里有一个小伙伴在处理事件监听函数的时候,遇到了一点问题,正好我比较空闲,于是帮他指出了代码中的问题,顺便整理一下,方便以后遇到类似问题的伙伴们有一个参考. 这是一个很简单的问题,对于基础知识比较杂实 ...