首页 > 代码库 > 简记<img>下方的空白间隙
简记<img>下方的空白间隙
当你书写以下代码
<img src="http://www.mamicode.com/balbal.." />
<div></div>
你会发现<img>距离<div>隔了几个空白像素
那么 Q1:这些空白像素如何产生的?
A1:这是因为 水平方向上的元素垂直对齐的方式 造成的。
通常情况,能在一行显示的元素,display应为inline或者line-block。
如果一行上的元素高矮不一致,那么应该如何对齐这些inline?
css提供了vertical-align来确定这些元素是如何对齐的。
该属性默认值为baseline 即字母x的底部,来对齐。
而字母x,本身是有高度的,自然就出现了额外的空隙
Q2:如何消除这些空隙?
A2:已经知道了原因,那么解决就很简单了
1.display:block 脱离vertical-align的影响
2.给<img>的父元素设置 font-size:0 字体没有了size 空隙也就自然消失了
3.给<img>的父元素设置line-height:0 行高 也可以
4.既然是因为baseline搞的鬼,那么把<img>的vertical-align设置为top 也可以消灭空隙。
简记<img>下方的空白间隙
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。