html切图,如果是对一整张设计图进行分割的时候。如果不是以设计图的自然边界为基准进行切分的话,在生成html的时候,就可能在两张图之间出现一个非常明显的空行。而看代码的话,两个<img>标签之间却没有任何的换行代码出现。这个问题该如何解决呢?

苏南大叔:html相邻图片,如何解决两张图片间的空隙? - html-img-space
html相邻图片,如何解决两张图片间的空隙?(图3-1)

本文测试环境:chrome@74.0.3729.169。特约嘉宾是:海贼王路飞。

效果图

下图就是苏南大叔所描述的情况。而且,大家看html的话,也会发现:html里面并没有任何的换行代码。也没有任何的margin,padding之后的css属性。

<img src="001.png" style="width:100%" />
<img src="002.png" style="width:100%" />  

苏南大叔:html相邻图片,如何解决两张图片间的空隙? - html-img-space-01
html相邻图片,如何解决两张图片间的空隙?(图3-2)

解决方案一background

设置父容器的background,可以平铺一个合适的背景或图片。这样的话,两个图片之间的过渡,就会显得更加平滑。但是相关空隙依然存在,只不过因为父容器的背景色的缘故,使得空隙被掩盖了。不过对于本文的路飞例子来说,并没有合适的背景图片或者背景色。

解决方案二font-size(推荐)

设置父容器的font-size0。这样的话,就可以消除两个图片间的空隙了。这个方案似乎有些匪夷所思,不过确实有效果。不过有些后遗症就是:父容器内的文字大小,会默认继承0。所以,需要对父容器内的显性文字,做特殊设定font-size

苏南大叔:html相邻图片,如何解决两张图片间的空隙? - html-img-space-02
html相邻图片,如何解决两张图片间的空隙?(图3-3)

解决方案三

这个方案也是好操作的,那就是牺牲代码的可读性,极限压缩html。两个相邻的<img>标签之间,不能留有任何的空格或换行。在代码层面,就连到一起,这样的话,页面上两个图片间的空白空隙也就消失了。不过,这么操作的话,对于喜欢html源码的人来说,是个小小的折磨。而且这种方法,也不是特别的稳妥。有的时候,对应的空隙,还是会顽固地存在。

总结

条条大路通罗马,这里苏南大叔给出了三个解决方案。至于哪个方案更好更合适,这个就是大家各自看各自的实际情况了。苏南大叔推荐您,了解更多html代码的相关文字:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   css    html

本站的忠实读者小伙伴,正在阅读下面这些文章: