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

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

AndyGuo2020-06-11 12:06:00【web前端】1744人已围观

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


顶一下 （1） 赏 踩一下 （0）
小郭博客

相关文章

最新发表

标签云 更多

点击排行

站长特荐

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