Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > img图片底部出现莫名的下边距问题_html/css_WEB-ITnose

img图片底部出现莫名的下边距问题_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:37:45
Original
1036 people have browsed it

谷歌中这样是解释的：

图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。

解决办法：

给img定义vertical-align或者定义为块状，最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零，font-size:0

Related labels：
img图片底部出现莫名的下边距问题
source：php.cn
Previous article：使用Axure RP原型设计实践04,了解全局变量_html/css_WEB-ITnose Next article：CSS3鼠标悬停图片动画_html/css_WEB-ITnose
Statement of this Website
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
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2204
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2352
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1968
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1857
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1919
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template