HTML img图片出现下边距的解决方法
2017-07-12 17:26
369 查看
图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。
给图片定义vertical-align也可以解决这个问题,将图片的垂直对齐方式设置为 top 或 bottom,这个空隙会消失。
解决办法给img定义vertical-align或者定义为块状display:block,最优的解决办是定义vertical-align,但是定义vertical-align为middle时在IE6中大概还有一像素的上边距,最好为top或bottom。还有种方法是把父容器的字体大小为零font-size:0
给图片定义vertical-align也可以解决这个问题,将图片的垂直对齐方式设置为 top 或 bottom,这个空隙会消失。
解决办法给img定义vertical-align或者定义为块状display:block,最优的解决办是定义vertical-align,但是定义vertical-align为middle时在IE6中大概还有一像素的上边距,最好为top或bottom。还有种方法是把父容器的字体大小为零font-size:0
相关文章推荐
- img图片下面莫名的出现下边距的快速解决方法推荐
- [置顶] HTML5 图片<img/>下边界出现空隙,去除空隙的解决方法
- div包含<img/>时,图片下方出现空隙的解决方法
- img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。
- <img src="中文文件名" /> 无法显示图片,图片名改成英文就可以显示;试了下在电脑桌面写了个HTML测试下,可以显示中文名称的图片,解决方法
- html-jquery/js引用外部图片时遇到看不了或出现403情况解决方法
- 在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。
- img图片下面出现莫名的下边距解决办法
- IMG图片下面出现下边距的解决办法
- 引:星际译王出现: HTML数据解析插件未找到!的解决方法
- 请问如何解决WORD转HTML是出现的“内存或磁盘空间不足,无法显示或打印图片”这个问题?
- zencart出现-c-.html 错误的解决方法
- 在li>a>div>img结构下出现ie6下点击无效以及无形空隙的解决方法
- 关于新闻图片轮转在html中显示正常,而通过aspx中不显示的解决方法!
- 图片IMG与容器下边界有空隙的解决方法-Div+CSS教程
- 浏览器解析js生成的html出现样式问题的解决方法
- C#从剪贴板获取HTML格式内容含中文字符出现的问题和解决方法
- li元素中包含img元素出现5px空白的解决方法
- 用Eclipse工具开发j2me时出现图片不显示解决方法
- javascript动态改变img的src属性图片不显示的解决方法