CSS教程 img标签与元素间间距处理方法

overme8个月前 (10-17)网页设计412
问题点:

在初始化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;}

相关文章


		CSS教程 如何控制input和img水平对齐

CSS教程 如何控制input和img水平对齐

验证码输入环节,将input和img放同一行,input标签不能水平对齐,明显对img标签矮一些。如下所示: 试过很多方法,比如单独给input设置样式都不行。 后来在网站搜到最多的就是给img...


		Css教程 Icomoon字体图标使用教程和方法

Css教程 Icomoon字体图标使用教程和方法

字体图标,顾名思义就是一种特殊的字体,这种字体显示给用户的效果就像图片。 字体图标的好处 轻量性:一个图标字体比一系列的图像要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以...

CSS教程 根据不同屏幕大小显示不同宽度布局

首先,需要了解@media 使用方法 @media screen and (判断属性){ CSS样式选择器 } 复制代码 注意花括号里装要变化CSS样式选择器 1、讲解准备 首先设置一...

发表评论

访客

看不清,换一张

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