Posted on | by liu
最近在写网页过程中，发现有些图片之间会出现一些奇怪的间隙，这让偶很困扰。经过一番调查研究，发现这种现象可能是由于CSS样式设置不当造成的。
一般情况下，大家会把图片通过CSS的“display:block”属性转换为块级元素，以便于控制图片的大小、位置等。但是，这样设置后，图片之间就会出现间隙。
原因是，当大家设置“display:block”属性时，实际上是把图片的上下文环境变成了块级元素。而在块级元素中，元素之间的间隙是通过“行框”的概念来控制的。而行框的高度等于行内元素的高度加上行内元素的上下padding值。因此，就会导致图片之间出现了一些奇怪的空隙。
那么，如何解决这个问题呢？方法其实很简单，只需要将图片的“vertical-align”属性设置为“top”或者“middle”即可。
例如，大家有以下的HTML代码：
<div class="img-container">
<img src="img/1.jpg">
<img src="img/2.jpg">
</div>
那么，在CSS中，大家只需要加入以下的样式即可：
.img-container img {
display: block;
vertical-align: top;
}这样，就可以解决图片之间产生的间隙问题了。当然，如果想要图片居中对齐，只需要把“vertical-align”设置为“middle”即可。
总结一下，当大家想要将图片转换为块级元素时，需要注意图片之间可能会产生间隙的问题。解决的方法就是将图片的“vertical-align”属性设置为“top”或者“middle”。希望这个小技巧对大家有所帮助。