重庆亿数信息技术有限公司(官方网站)欢迎您的到来!
24小时咨询电话:023-68659593    13637900022
重庆网站建设公司
重庆做网站建设的公司 重庆网站建设 重庆亿数信息技术有限公司官方网站 重庆网站制作 亿数官网 重庆做网站建设公司
 
缃戠珯鐤戦棶瑙g瓟
重庆网站建设为给客户提供优质的设计服务!
图片在DIV中产生底部间隔的解决方法
关键字:重庆网站建设公司|重庆做网站的公司  来源:重庆亿数网站建设公司   阅读:4799

默认情况下,容器中的图片在容器底部会自动产生一个间隔距离。要想把这个距离清除掉,首先要明白这个距离的产生原理,也即是说为什么会产生这个距离。图片作为内联元素,其默认的vertical-align属性的取值为baseline,也就是基线对齐。这种垂直对齐方式是图片的底部与文本的基线对齐。这就是产生这个小距离的根本原因。
产生的小距离是图片与文本基线对齐后,文本基线下方的文字部分,也就是四线三格的第三格,即基线。
四线三格的第三格,即基线

既然知道了这个距离产生的原因,那么就容易处理了。

解决方案1:调整vertical-align属性的取值:
既然这个距离是由图片的vertical-align属性的默认取值为baseline产生的,那么就可以调整该属性的取值不再是baseline即可。
将图片的vertical-align属性设置为bottom、middle、top均可。实现代码如下所示。
div img{vertical-align:middle;}

解决方案2:调整display属性的取值:
我们知道,vertical-align属性只适用于内联元素。那么只需要将图片由内联元素改为块级元素即可。
修改元素的状态可以采用CSS技术中的display属性。实现代码如下所示。
div img{display:block;}
上述代码将<img />标记变为了一个块级元素。

解决方案3:调整line-height属性的取值:
当把line-height属性的取值设置为0时,则文字之间的间距较小。尽管图片的垂直对齐方式依然为基线对齐,但是文字的基线不足以显示出来,所以就看不到这个小距离了。实现代码如下所示。
div{line-height:0;}
注意,这个属性不适用于图片标记的,应该用于图片所在的容器标记对之上,以保证该容器内部的文本行距为0。

解决方案4:调整font-size属性的取值:
如果将font-size属性的取值设置为0,也可以像解决方案3那样将文本的大小调小,则文本的基线就不足以显示出来了。实现代码如下所示。
div{font-size:0;}
同理,该属性的设置也需要在图片所在的容器标记对之上实现。

本信息由重庆亿数信息技术有限公司网站建设部提供。www.cqyishu.net未经授权请勿转载!
上一篇: 没有了
下一篇: 没有了
新闻观点
推荐文章
常见问题
设计 网站建设 网络营销 软件开发
网站设计 网站开发 搜索引擎优化(seo) 软件定制开发
平面设计 域名购买 百度、谷歌搜索引擎排名 OA办公自动化
FLASH动画设计 空间、服务器购买 线上网络品牌战略策划 ERP企业管理软件
广告片设计 网站备案 线下活动品牌落地策划  
公司地址:重庆市九龙坡区歇台子科园四路223#-7-2号
咨询电话:023-68659593  15523549886  13637900022
客服人员:276389867  /  84939066  /  1102237603
公司邮箱:276389867@qq.com
首页  |  关于我们  |  联系我们  |  付款方式  |  诚聘英才  |  重庆网站建设  |  在线留言  |  友情链接  |  网站地图
COPYRIGHT © 2013 版权所有:重庆亿数信息技术有限公司(官方网站)  |  备案/许可证编号为:渝ICP备13001898号    网址:www.cqyishu.net  
友情链接