码迷,mamicode.com
首页 > Web开发 > 详细

html设计时 img与元素存在间距的处理

时间:2019-05-26 17:44:35      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:初始   题解   bis   nbsp   pre   line   size   网站   bottom   

在学习开发笔书奇小说网站时,遇到一下问题

问题点:

在初始化CSS中设置了img的padding和margin为0,可是在插入img后,img与父元素仍然有一定间距。

 

原因分析:

文字图片等inline元素默认与父级元素的baseline对齐,而baseline与父级元素底部是有一定距离的(这个与font-size,font-family的相关设置有关)。给图片或者文字元素添加vertical-align:top或者middle、bottom等可解决该问题。

问题解决代码:

.header-body img{vertical-align: middle;}

 

html设计时 img与元素存在间距的处理

标签:初始   题解   bis   nbsp   pre   line   size   网站   bottom   

原文地址:https://www.cnblogs.com/is-jackwen/p/10926554.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!