img之间的间隙问题
前言:关于基线(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之间的间隙问题的更多相关文章
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- 去除inline-block之间的间隙
在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - <去除inline-block元素间的空隙>的说法,这个间隙是4px或者8px ...
- [原创]ie6,7中td和img之间有间隙
情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...
- GIS地理工具案例教程——批量去除多边形的之间的间隙
GIS地理工具案例教程--批量去除多边形的之间的间隙 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 问题:几乎所有的手工生产的数据,都存在多边 ...
- 【Web】[原创]ie6,7中td和img之间有间隙
情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...
- 如何消除inline-block元素之间的间隙?
一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...
- 两个img之间出现间隙的解决方法
今天写了个小页面,发现了一个问题,两个包在a标签里的img之间总是有间隙,不能挨在一起,最后在同事的帮助下,找到解决的办法是,设置img的基线,css代码如下: img{vertical-align: ...
- inline-block元素之间出现间隙
一.问题 这里部分的组成是一个input框和一个a按钮,然后a标签为了设置它的width和height我让他display:inline-block(行内元素以块级元素显示内容).神奇的一幕出现了,两 ...
- css怎样去掉多个Img标签之间的间隙
在写css的时候经常会遇到这样的情况,两张宽度加起来是2n的图片,在宽度为2n的容器中放不下,这是因为两张图片之间有一段间隙的缘故,产生这种现象的原因是浏览器把两个img标签之间的空格当成了空白节点. ...
随机推荐
- linux配置wifi连接并通过ssh代理开启socks代理
1, 命令行配置连接wifi具体我是用的cubieboard2上Debian主机,其中配置wifi的命令行有wpa_cli,具体用法步骤如下.wpa_cli 命令行执行需要root权限,详细用法请见 ...
- 几个平台环境里视频编解码和图像scale的硬件加速的方法
记录一下遇到几个平台里的视频编解码和图像scale的硬件加速的方法 1,intel平台当包含GEN系列的集成GPU时,可用libva实现视频codec.颜色空间转换和图像scale的硬件加速,具体可使 ...
- idea好用插件(一)
代码规范插件 Alibaba Java Coding Guidelines 安装后 可以在文件.文件夹邮件,显示编码规约扫描,点击后显示 可以通过双击定位问题代码,对某些问题可以进行快速的修复 比如: ...
- 更改Qt Application为 Qt Console Application
工程属性 -> 链接器 -> 系统 -> 子系统 : 更改为 控制台 (/SUBSYSTEM:CONSOLE)
- 《C#图解教程》 总览
初识本书是在知乎,许多网友推荐它作为 C# 入门书籍. 本书的最大特点是插图丰富,许多复杂的概念,一副插图就解释得通透明了. 本书另外一个隐藏特性是作者有着 C/C++ 经验,书中经常提到它们与 C# ...
- ASP.NET CSS 小结
1.ASP.NET 引用CSS 1.Site.master里面设置webopt <webopt:bundlereferencerunat="server"path=" ...
- [Luogu2973][USACO10HOL]赶小猪
Luogu sol 首先解释一波这道题无重边无自环 设\(f_i\)表示\(i\)点上面的答案. 方程 \[f_u=\sum_{v,(u,v)\in E}(1-\frac PQ)\frac{f_v}{ ...
- [BZOJ4517] [Sdoi2016] 排列计数 (数学)
Description 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰好有 m 个数是 ...
- 微信公众号接口配置验证URL
/** * 审核填写的URL */ public function checkUrl(){ //获得参数 signature nonce token timestamp echostr $nonce ...
- 基于规则评分的密码强度检测算法分析及实现(JavaScript)
简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...