如何防止跨度标签相互重叠？

Question

为什么<span>标签彼此重叠,以及如何防止这种情况？我需要它们很好地环绕屏幕,这样它们就不会妨碍其他人的观点.

HTML:

<span class="alphas">#</span>
<span class="alphas">A</span>
<span class="alphas">B</span>
<span class="alphas">C</span>
<span class="alphas">D</span>
etc...

CSS:

.alphas {
    border-radius: 5px;
    border: 12px solid #8AC007;
    padding: 20px;
    background-color: #006677;
    width: 200px;
    height: 150px;
}

看演示 - http://jsfiddle.net/uyg0zdLf/

Answer 1

<span>标签是默认联级别,width而height值将不适用.您可以将其设置为内联块,阅读此帖子以了解它们之间的更多差异.

UPDATED DEMO

.alphas {
    display: inline-block;
}

还有一件事 - 浏览器还在内联*级元素上呈现空白区域,请点击此帖以获取更多信息.