CSS3 overlapping

Problem

How can I prevent CSS3 overlapping? They are all

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

And my CSS is

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;
}

The overlapping looks like this

http://oi61.tinypic.com/27xkyn7.jpg

Thank you, excellent CSS3 experts at Stack Overflow

Problem courtesy of: KershawRocks

Solution

You will need to add the property display:inline-block; to prevent the overlapping. The problem is that a <span> element by default has the property display:inline;. This is great for text but means that the top and bottom values of margin and padding can't be set as an inline element should only be as high as the text contained within.

Solution courtesy of: Caffeinated.tech

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.