Home > Article > Web Front-end > img图片底部出现莫名的下边距问题_html/css_WEB-ITnose
img图片底部出现莫名的下边距问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:451002browse
谷歌中这样是解释的：
图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。
解决办法：
给img定义vertical-align或者定义为块状，最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零，font-size:0
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：使用Axure RP原型设计实践04,了解全局变量_html/css_WEB-ITnoseNext article：CSS3鼠标悬停图片动画_html/css_WEB-ITnose