当前位置:首页 > 前端开发 > css > 正文内容

多种方法清除图片img底部空白间隙

Miao2个月前 (10-19)css57

在开发中,常常看见图片下方有一条间隙,不大不小就在那里,下面就说说有哪些方法可以清除掉这个间隙:

<div class="container">
    <img src="123.jpg" />
</div>
html,body{
    margin: 0;
    padding: 0;
}

方法一:给父元素(container)设置font-size: 0;

.container{
    font-size: 0;
}

方法二:给img设置display: block;

img{
    display: block;
}

方法三:给img设置vertical-align: bottom;

img{
    vertical-align: bottom;
}

方法四:给img设置line-height: 5px;

.container{
    line-height: 5px;
}

扫描二维码推送至手机访问。

版权声明:本文由Miao发布,版权归作者所有,如需转载请注明出处。

本文地址:https://www.wmlike.com/?id=52

标签: cssimgimage
分享给朋友:

相关文章

css3 align-self 属性使用方法及示例

css3 align-self 属性使用方法及示例

align-self属性为flex容器中的元素指定默认对齐方式。 align-self属性值 值 描述 auto 默认值,元素继承了它的父容器的 align-items...

深入理解css3动画:animation、transform、transition

深入理解css3动画:animation、transform、transition

前言在CSS3之前,动画主要都是以JavaScript或者Gif图片来实现,但是实现效果并不是很理想或者制作起来很麻烦,自有了CSS3之后很多动画几句代码即可实现,方便,快速,性能更好。 目录 a...

css3实现文字渐变色

css3实现文字渐变色

给文字渐变很简单,只需要用到css3的background-image和background-clip属性,我们先来看看效果: <!DOCTYPE html> <html>...

css3多列布局、分栏

css3多列布局、分栏

以前,如报纸类型排版,要用CSS动态实现其实是比较困难的,因为内容是动态的,每个div显示多少文字是很难控制的。现在CSS3提供了个新属性columns用于多列布局,下面我们就来详细看看。...

css实现各种Loading效果附解析【强烈建议收藏】

css实现各种Loading效果附解析【强烈建议收藏】

以下的这些案例原理都是通过不同的延迟时间,给元素或子元素设置包括X、Y和Z轴上的移动旋转,以及缩放来达到动画的效果。有了这些参考,加上创意还能做出更多的类型加载效果。 <div class=&...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。