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 CSS3的优秀CSS3专家

Answer 1

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