title: CSS3 overlapping
body: <p>How can I prevent CSS3 overlapping?   They are all</p>
  <pre><code>&lt;span&gt; precious &lt;/span&gt; &lt;span&gt; and &lt;/span&gt; &lt;span&gt; cute &lt;/span&gt;
  </code></pre>
  <p>And my CSS is</p>
  <pre><code>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;
  }
  </code></pre>
  <p>The overlapping looks like this</p>
  <p><a href="https://i.stack.imgur.com/LbOj4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LbOj4.jpg" alt="" /></a></p>
  
  <p>Thank you, excellent CSS3 experts at Stack Overflow</p>