img之间有空隙,img之间的间距

　　在我们正常的开发过程中，我们经常需要使用多个图像。当使用多个图像时，我们通常使用一个列表来加载我们的img。

　　！DOCTYPE html html lang= en head meta charset= UTF-8 title document/title style type= text/CSS img { height:200 px；边距：0；填充：0；边框-底部：1px纯红；} ul{ border: 1px纯蓝；列表样式：无；填充：0；边距：0；}/style/head body ul Li img src= Li Peng . png /Li/ul/body/html但是这次我们发现了一个问题。为什么我的图片下面多了一条线？

　　这是怎么回事？

　　我不是把img的内外边距都清空了吗？

　　其实这其实就是内联元素的幽灵。

　　任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。---- 《CSS权威指南》

　　你什么意思？

　　也就是说，实际上图片、文字等行内元素的默认对齐方式是与其父基线对齐，但你对齐的是基线，而拉伸高度的是整个元素的高度(底线)，这肯定会造成一定的落差，也就是我们上面说的问题。

　　既然我们知道了这个问题的原因，解决起来就容易多了。

　　1.第一种解决方案

　　既然是内联元素造成了这个问题，那么我们自然可以简单粗暴的解决这个问题，那就是“改变我们元素的个性”，由内联改为块。

　　style type= text/CSS img { height:200 px；边距：0；填充：0；边框-底部：1px纯红；显示：块；} ul{ border: 1px纯蓝；列表样式：无；填充：0；边距：0；} /style2.第二种解决方案

　　太粗糙了。是变性，以后就不能玩了。所以我们必须试着用曲线拯救生命。我们可以修改它的垂直对齐。可以吗？

　　style type= text/CSS img { height:200 px；边距：0；填充：0；边框-底部：1px纯红；垂直对齐：居中；} ul{ border: 1px纯蓝；列表样式：无；填充：0；边距：0；} /style可见这样也能达到想要的效果。

　　原因是vertical-align的默认属性是baseline，所以我们只要设置不同于baseline的属性就可以避免这个问题。

　　3.第三种解决方案

　　但是，对齐方式已被修改，这也可能会导致问题。我们能让这个元素浮动吗？由于您已不在当前文档流中，因此在布局时自然不会参考此文本进行对齐。

　　我们可以使用浮动。

　　style type= text/CSS img { height:200 px；边距：0；填充：0；边框-底部：1px纯红；浮动：左；} ul li {溢出：隐藏；} ul{ border: 1px纯蓝；列表样式：无；填充：0；边距：0；} /style这个也可以解决这个问题，但是请注意“飘是好的，但是不要贪一杯”。

　　你必须能够正确解决浮动的影响，如果你原本打算做文字环绕效果，那么使用浮动一定是你的最佳选择。

　　4.第四种解决方案

　　如果以上方案都不能解决你的问题，那我只好祭出我的大杀器了。

　　您可以将父元素的文本大小设置为0。

　　style type= text/CSS img { height:200 px；边距：0；填充：0；边框-底部：1px纯红；} ul Li { font-size:0px；} ul{ border: 1px纯蓝；列表样式：无；填充：0；边距：0；} /style既然你按照文字的基线对齐，那我就直接给你设置文字，这样你就定位不到了。然而，只有当你“不顾一切地想把它弄出来”时，才推荐这种做法。

　　总结

　　好了，这就是这个问题的四个解决方案。希望所有看了这篇文章的朋友以后都能跳出这个坑。有问题可以留言。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。