HTML代码如下
<div class="content">
<a href="javaScript:;">大树</a>
<a href="javaScript:;">小草</a>
<a href="javaScript:;">花朵</a>
<a href="javaScript:;">太阳</a>
</div>
、
效果如图所示,a标签为行内元素,他们之间按上面布局会出现空隙,这些空隙是怎么产生的。现在做如下调整:
<div class="content">
<a href="javaScript:;">大树</a><a href="javaScript:;">
小草</a><a href="javaScript:;">
花朵</a><a href="javaScript:;">
太阳</a>
</div>
此时可以看出,a标签之间的空隙消失了。由此可以推断出行内元素之间的空隙是由标签换行产生的。
如果把a标签的display改为inline-block 也会出现上述问题。