<img>元素底部为何有空白?
原因:
图片文字等inline元素默认是和父级元素的baseline对齐的,即:vertical-align 的默认值是 baseline;而baseline又和父级底边bottom有一定距离;
img出现的空白就是baseline和bottom之间的这段距离;即使只有图片没有文字,只要是 inline 的图片这段空白都会存在。
img 标签 是inline 元素, inline元素默认是baseline对齐的。 当baseline对齐的时候,baseline和bottom之间有段距离,就是出现的空白;
所以直接设置 vertical-align的值都可以避免这种情况出现。
top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0,那么 baseline 与 bottom 之间的距离也变为0,那道空白也就不见了。
如果没有设置 line-height,line-height 的默认值是基于 font-size 的,视渲染引擎有所不同,但一般是乘以一个系数(比如1.2)。因此,在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然,这样做的后果就是不能图文混排了。
解决方法:
一:设置vertical-align;
img{
vertical-align : middle;
}
二:定义img的父容器的字体大小为0;
.main{ font-size : 0; }
三:把图片设置为块级元素;
img{
display : block;
}
参考::
http://www.xiabingbao.com/css/2015/10/12/css-img-block
https://segmentfault.com/q/1010000000694663
https://www.zhihu.com/question/21558138
<img>元素底部为何有空白?的更多相关文章
- <img>元素底部为何有空白及其解决方案
一.为什么<img>元素底部会有空白? 要理解这个问题,首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义.vertical-ali ...
- img元素底部有空白间距的问题
<div style="width:100px;height:100px"><img src="./1.jpg"></div> ...
- 去掉display:inline-block元素间的多余空白
问题:每1个带display:inline-block;属性的链接 a 水平.垂直方向都带有一定的空白 关键在于父元素定义font-size:0 去掉行内块元素水平方向空白:子元素定义vertical ...
- 清除行内元素之间的HTML空白
原文连接:Remove Whitespace Between Inline-Block Elements 原文日期: 2013年8月27日 翻译日期: 2013年8月28日 至今我还记得年轻是在IE6 ...
- 关于img底部空白
<img>元素底部为何有空白? 问题: 最近听网课遇到这样一个问题,先po出代码如下: <!--html--> <div class="top"> ...
- CSS Bugs 解决方案
说明:本文档兼容性测试基础环境为:windows系统:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 Bugs及解决方案列表(以下实例默 ...
- 浏览器css bug及bug解决方法
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- Bugs及解决方案列表
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- CSS常见BUG
CSS Hack IE条件注释: 所有IE:<!--[if IE]> css code <![endif]--> IE6以上:<!--[if gt IE 6]> c ...
随机推荐
- 【JavsScript】JavaScript MVC框架PK:Angular、Backbone、CanJS与Ember
摘要:选择JavaScript MVC框架很难.一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思.本文对JavaScript MVC框架Angular.Ba ...
- ios开发——实用技术篇Swift篇&照片选择
照片选择 // MARK: - 选择照片 /*----- 选择照片 ------*/ @IBAction func addImageButtonClick() { let actionSheet = ...
- Cocos2dx 3.0 过渡篇(二十九)globalZOrder()与localZOrder()
前天非常难得的加班到八点...为什么说难得呢?由于平时我差点儿就没加班过.六点下班后想走就走,想留就留.率直洒脱.不拘一格.尽显男儿本色.程序猿,就是这么自信! -----------这篇博客的标题本 ...
- oracle 有用站点
使用oradebug修改数据库scn – 提供专业ORACLE技术咨询和支持@Phone13429648788 - 惜分飞 Solaris上使用DTrace进行动态跟踪 老熊的三分地-Oracle及数 ...
- repeater复杂表格的显示
首先简要的描述一下所要完成的事情:将某一个方言中的每一个声韵调组合,按照格式显示一个字 数据库中的信息:****,声母(Initial),韵母(Final),声调(Tone),一个汉字(Word),* ...
- C++字符串处理封装类String
概述 C++在处理字符串时相对于python等脚本语言并没有什么优势,下面将常用的字符串处理函数封装成一个String工具类,方便以后使用,后期还会对该类进行扩充,下面是具体的实现: // Strin ...
- LeetCode22 Generate Parentheses
题意: iven n pairs of parentheses, write a function to generate all combinations of well-formed parent ...
- 开发工具 之 PowerDesigner 应用积累
1.在默认情况下,code与name是联动,修改了name中的数据. 解决方法:设置菜单栏选择"Tools→General Options→Dialog" 中的 "Na ...
- 查找字符对应Unicode码的十进制数字
//将字符转换为Unicode码中字符对应十进制数字 int byte0 = 'A' & 0xff;//byte0=65 参考文档:http://baike.baidu.com/view/26 ...
- Html方式导出word 页头和页脚设置
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:o ...