|  RSS订阅  |  加入收藏

CSS中img图片下方出现空白边距的解决办法

偶然发现在排版中会出现图片下边距有4个像素的空白。在不同的浏览器中,这个空白还不是固定值,通常3-6个像素中间。通过对样式表中所有父级元素的检查,并未发现有类似边距定义。自己比较下就知道这个图片元素本身造成的。 原因: 图片行内垂直对齐的是基线,基线的位置与字体行距有关。 办法: 1、将img变为块状元素即display:block; 2、将img垂直对齐方式定义为top或bot
摘要
... 偶然发现在排版中会出现图片下边距有4个像素的空白。在不同的浏览器中,这个空白还不是固定值,通常3-6个像素中间。通过对样式表中所有父级元素的检查,并未发现有类似边距定义。自己比较下就知道这个图片元素本身造成的。

原因:
图片行内垂直对齐的是基线,基线的位置与字体行距有关。

办法:
1、将img变为块状元素即display:block;
2、将img垂直对齐方式定义为top或bottom即vertical-align:top;、vertical-align:bottom;
3、将img父级元素文字大小定义为0即font-size:0;
打赏
  CSS    
转载请注明出处,未经许可禁止商用!
西枫里 熊掌号
代码改变世界 ———— 半路出家,全程修道
发表评论
*依据《网络安全法》规定,您需实名认证后才能评论!