title: Why does a link overlap the text?
body: <p>This is the HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;
          We bring you the latest in entertainment &amp; information services, right on your phone. From the latest of Bollywood to the futuristic applications, get it all here!
          &lt;a href="#"&gt;View All&lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the CSS....</p>
  
  <pre><code>div{width: 350px;}
  a{
      padding: 30px;
      background: red;
      margin: 20px;
      border-radius: 12px;
      background: red;
      color: #fff;
      font: bold 12px Arial, Helvetica, sans-serif;
      text-decoration: none;
  }
  </code></pre>
  
  <p>I know this could be solved by using <code>display: inline-block;</code> in <code>.a</code>. But I would like to know why this is overlapping the text? Should it not to go beyond the text?</p>
  
  <p><strong><a href="http://jsfiddle.net/rHCNb/" rel="nofollow">DEMO1</a></strong></p>
  
  <p><strong><a href="http://jsfiddle.net/rHCNb/8/" rel="nofollow">DEMO2</a></strong> now <code>a</code> is within a block level of p.</p>
  
  <p>And also have a look at this <strong><a href="http://jsfiddle.net/rHCNb/5/" rel="nofollow">DEMO</a></strong>. Img is also an inline element. And why this is not overlapping, this should also be overlapping, right?</p>