行内元素之间的有个小空隙的问题

Posted 2020-09-01 空白凌乱感

一、简述

　　编写html页面时，有时候在某一种情况下中用到了行内元素后面要紧跟着一个行内元素，比如：<span></span><a></a>  那么就会出现span元素与a元素之间有一个小空隙。

二、内容

　　首先是span元素与a元素之间出现了小空隙的情况。

<span>span</span>
<a href=\'javascript:void(0)\'>第一个a标签</a>
</div>

　　然后是消除小空隙的方法。

<div>
<span>span</span><a href=\'javascript:void(0)\'>第一个a标签</a>
</div>

　　就是说可能因为IDE工具的代码格式化，或者出现可读性考虑，把span元素与a元素分行，所以就导致了span后面跟着一个看不见的回车符，小空隙也就出现了。如果a元素紧跟着span元素，两者在同一行内，虽然可以消除掉小空隙，但是可读性就不好了啊。这样就可以用一个小技巧

<span>span</span><!--
--><a href=\'javascript:void(0)\'>第一个a标签</a>
</div>

　　利用注释就可以消除掉小空隙，还可以分行以提高可读性。