前言:关于基线(base line),中线(middle line),行高(line height)的了解还是比较浅的,所以引用前辈的成果,稍带解释下

1)行高:两行文字之间“基线”之间的垂直距离

2)行距:一行文字“底线”到“顶线”之间的垂直距离

【我用英文四线谱,脑补了什么为之“基线”,大胆的猜想缘由是:编程语言都为英文】

行内元素inline:span,img 等;而行内元素的对齐默认是以父级元素进行基线对齐:vertical-align:base-line

当在页面中放置img图片时:

页面中出现的图片如下:

用标签包裹更能看出间隙

出现的可能原因:

1)因为img是line内联元素

2)img是根据父级进行base-line基线对齐的

解决方案:

针对1):将img变成block块元素

针对2)有两种:

第一种:将img的对齐方式设置为vertical-align:middle

第二种:将父级的font-size:0【无法根据父级进行基线对齐,care:如果有子元素,记得在子元素上设置字体的大小】

后续疑问?

为什么将img设置为block就没有间隙了呢?

做一个“实验”,块元素和内联元素的比较

故联想实验结果:将img设为block之后,相对父级的base-line都是一样的,故没有间隙【希不吝指出错误,多多指点】

img之间的间隙问题的更多相关文章

  1. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  2. 去除inline-block之间的间隙

    在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - <去除inline-block元素间的空隙>的说法,这个间隙是4px或者8px ...

  3. [原创]ie6,7中td和img之间有间隙

    情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...

  4. GIS地理工具案例教程——批量去除多边形的之间的间隙

    GIS地理工具案例教程--批量去除多边形的之间的间隙 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 问题:几乎所有的手工生产的数据,都存在多边 ...

  5. 【Web】[原创]ie6,7中td和img之间有间隙

    情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...

  6. 如何消除inline-block元素之间的间隙?

    一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...

  7. 两个img之间出现间隙的解决方法

    今天写了个小页面,发现了一个问题,两个包在a标签里的img之间总是有间隙,不能挨在一起,最后在同事的帮助下,找到解决的办法是,设置img的基线,css代码如下: img{vertical-align: ...

  8. inline-block元素之间出现间隙

    一.问题 这里部分的组成是一个input框和一个a按钮,然后a标签为了设置它的width和height我让他display:inline-block(行内元素以块级元素显示内容).神奇的一幕出现了,两 ...

  9. css怎样去掉多个Img标签之间的间隙

    在写css的时候经常会遇到这样的情况,两张宽度加起来是2n的图片,在宽度为2n的容器中放不下,这是因为两张图片之间有一段间隙的缘故,产生这种现象的原因是浏览器把两个img标签之间的空格当成了空白节点. ...

随机推荐

  1. linux配置wifi连接并通过ssh代理开启socks代理

    1, 命令行配置连接wifi具体我是用的cubieboard2上Debian主机,其中配置wifi的命令行有wpa_cli,具体用法步骤如下.wpa_cli 命令行执行需要root权限,详细用法请见 ...

  2. 几个平台环境里视频编解码和图像scale的硬件加速的方法

    记录一下遇到几个平台里的视频编解码和图像scale的硬件加速的方法 1,intel平台当包含GEN系列的集成GPU时,可用libva实现视频codec.颜色空间转换和图像scale的硬件加速,具体可使 ...

  3. idea好用插件(一)

    代码规范插件 Alibaba Java Coding Guidelines 安装后 可以在文件.文件夹邮件,显示编码规约扫描,点击后显示 可以通过双击定位问题代码,对某些问题可以进行快速的修复 比如: ...

  4. 更改Qt Application为 Qt Console Application

    工程属性 -> 链接器 -> 系统 -> 子系统 : 更改为 控制台 (/SUBSYSTEM:CONSOLE)

  5. 《C#图解教程》 总览

    初识本书是在知乎,许多网友推荐它作为 C# 入门书籍. 本书的最大特点是插图丰富,许多复杂的概念,一副插图就解释得通透明了. 本书另外一个隐藏特性是作者有着 C/C++ 经验,书中经常提到它们与 C# ...

  6. ASP.NET CSS 小结

    1.ASP.NET 引用CSS 1.Site.master里面设置webopt <webopt:bundlereferencerunat="server"path=" ...

  7. [Luogu2973][USACO10HOL]赶小猪

    Luogu sol 首先解释一波这道题无重边无自环 设\(f_i\)表示\(i\)点上面的答案. 方程 \[f_u=\sum_{v,(u,v)\in E}(1-\frac PQ)\frac{f_v}{ ...

  8. [BZOJ4517] [Sdoi2016] 排列计数 (数学)

    Description 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰好有 m 个数是 ...

  9. 微信公众号接口配置验证URL

    /** * 审核填写的URL */ public function checkUrl(){ //获得参数 signature nonce token timestamp echostr $nonce ...

  10. 基于规则评分的密码强度检测算法分析及实现(JavaScript)

    简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...