html设计时 img与元素存在间距的处理
在学习开发笔书奇小说网站时,遇到一下问题
问题点:
在初始化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;}