CSS3重叠

Question

如何防止 CSS3 重叠？他们都是

<span> precious </span> <span> and </span> <span> cute </span>

我的 CSS 是

span 
{
    margin : 20px;
    min-width: 150px;
    border-radius:5px;
    background-color:white;
    border: 2px solid white;
    font-weight:bold;
    padding:10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all .8s ease;
    transition: all 1s ease;
}

重叠看起来像这样

谢谢你，Stack Overflow 优秀的 CSS3 专家

Answer 1

您需要添加属性 display:inline-block;以防止重叠。问题是 <span>默认情况下，元素具有属性 display:inline; .这非常适合文本，但意味着 top和 bottom margin 的值和 padding不能设置为内联元素，其高度应与其中包含的文本一样高。