您现在的位置是:首页 > 学无止境 > web前端web前端

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

AndyGuo2020-06-11 12:06:00web前端1370人已围观

简介图片与父元素下边缘有 2px 的间隙,并不是因为空格。多个 inline-block 元素之间的间隙才是因为空格。任何不是块级元素的可见元素都是...

图片与父元素下边缘有 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;


小郭博客

相关文章

标签云 更多

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏