（标注 文章来源 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. 修改Credentials 密码

    今天,Leader 吩咐要修改管理账户的密码,我负责的Part是修改package和 Replication的Job的密码.仔细想了下,由于我们使用的Windows验证方式,而Job在执行时,是使用P ...

  2. 扩：new and override

    昨天有个网友问我继承里面的new和override关键词有啥区别,呃,我们来看个例子就知道了 new ==>隐藏父类同名方法  override==>覆盖 定义一个父类: public c ...

  3. @font-face使用

    转自http://www.tuicool.com/articles/QVf6nei 一.webfont与@font-face 什么是webfont web font,又称之为 在线字体 或者 网络字体 ...

  4. Android开发之Toast

    第一次在博客园发布文章,就把我刚弄明白的关于Android开发中的提示设置,分享给大家. Toast是Android中经常用到的一个方法,用于简单的用户提示,经过摸索我发现了Toast的两种使用方式, ...

  5. 关于在BAE上部署ThinkPHP框架的问题

    现在有点小兴奋,因为在在BAE上部署ThinkPHP框架的问题快折腾一天了,午觉都没睡,不过没白整总算有点结果.不扯淡了,直入正题吧. 之前熟悉ThinkPHP框架,想在BAE上用ThinkPHP做点 ...

  6. K & DN 的前世今生（微软开源命名变革）

    一个非常有意思的 Issue:Can we rename K? 在这个 Issue 中,有大量的社区开发者讨论了微软开源命名问题,主要是 K 如何进行替换掉?看来大伙都对微软项目命名有歧义,首先,再次 ...

  7. Android各类权限意思祥解

    1. android.permission.ACCESS_CHECKIN_PROPERTIES    允许读写访问”properties”表在 checkin数据库中,可以修改值上传 2. andro ...

  8. 如何将MyEclipse项目导入eclipse

    我们经常会在网上下载一些开源项目,或者从别的地方迁移一些项目进来,但经常会发现导入后各种报错.这是初学java肯定会遇到的问题,本文对一些常见的处理方案做一个总结.(本文将MyEclipse项目导入e ...

  9. 谈谈asp.net MVC中的AppendTrailingSlash以及LowercaseUrls ，你还记得吗？

    asp.net MVC是一个具有极大扩展性的框架,可以在从Url请求开始直到最终的html的渲染之间进行扩展,所以要学好还是需要了解框架的运行原理,推荐Artech. 今天我们回忆的不是MVC中的fi ...

  10. 使用EDMX查询（EF基础系列15）

    EF支持三种类型的查询: 1.LINQ to Entities 2.Entity SQL 3.Native SQL 1.LINQ to Entities LINQ Method syntax: usi ...