首页 > 其他 > 详细

解决img标签上下出现间隙的方法

时间:2017-08-15 23:57:15      阅读:452      评论:0      收藏:0      [点我收藏+]

图片与父元素下边缘有 2px 的间隙,并不是因为空格。多个 inline-block 元素之间的间隙才是因为空格。

 

任何不是块级元素的可见元素都是内联元素,其表现的特性是“行布局”形式。----《CSS权威指南》

如图片文字等内联元素,它默认对齐方式都是和它的父级的 baseline 去进行对齐的,但是你对齐的是 baseline,撑开高度的却是元素整体的高度(bottom line),这样肯定就会造成一定的间隙

1.第一种解决方案
既然是 inline 元素才会发生这个问题,那我们自然可以简单粗暴的解决这个问题,那就是给我们的元素“变个性”,让它从 inline 变为 block 不就可以了么?

2.第二种解决方案
这也太粗暴了,变了性别,回头还怎么愉快的玩耍呀,所以我们要尝试曲线救活,我们可以去修改一下它的垂直对齐方式呀,这样是不是就可以了呢?
vertical-align 的默认属性就是 baseline ,我们只要设置了跟 baseline 不一样的属性,都可以避免这个问题。
baseline 默认
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length
% 使用"line-height"属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承vertical-align属性的值

3.第三种解决方案
使用浮动,float
浮动虽好,可不要贪杯哟

4.第四种解决方案
父元素字体大小设成0
font-size: 0;

解决img标签上下出现间隙的方法

原文:http://www.cnblogs.com/chenglj/p/7368380.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!