这是由两个<span>元素之间的空格产生的视觉上的间隙，原代码里有多余的空格：

 <div>

            <span class="green">小乌龟</span>

</div>

改成

<div><span class="green">小乌龟</span></div>

就没问题了。

这个padding  应该是里面的文字到span边框的距离  然而两个span间为什么也会有距离？？

你看下css样式就知道了，这里已经设置了内边距为8px

span
{
    color: White;
    padding: 8px
}