怎样去除img之间的间距

Posted 绝迹谷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样去除img之间的间距相关的知识,希望对你有一定的参考价值。

解决方法:

    <div style="font-size:0;" > <img/> </div>

原理分析:

    块级元素包含内联元素如图片文字等时,内联元素默认是和父级元素的baseline(基线)对齐的,而baseline又和父级元素底边有一定的距离(这个距离和font有关,不一定是5px),所以以上代码的效果中不同div之间有间隙,这是因为图片与父元素的底边有距离。其 baseline 是vertical-align属性的默认值,vertical-align属性是设置元素的垂直排列的,用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐,除了baseline对齐方式之外,还可以是sub | super | top | text-top | middle | bottom | text-bottom |inherit(任何的版本的Internet Explorer (包括 IE8)都不支持属性值 "inherit")。

以上是关于怎样去除img之间的间距的主要内容,如果未能解决你的问题,请参考以下文章

去除行块级标签之间的默认间距

关于去除2个inline-block之间的间距

如何去除内联元素(inline-block元素)之间的间距(转载)

img,span去除诡异的边距

html:如何去除插入图片底部的留白?

去除inline-block元素间间距