title: Line-height CSS is moving layout
body: <p>I'm trying to use line-height to space out my paragraph but anything above 1.25 for my line-height destroys the layout of the site. </p>
  
  <p>Here it is on JSfiddle: <a href="http://jsfiddle.net/2cHe3/1/" rel="nofollow">http://jsfiddle.net/2cHe3/1/</a></p>
  
  <p>I placed comments where the problem occurs.</p>
  
  <pre><code>p{
      width:400px;
      display:inline-block;
      margin:0 0 0 60px;
      vertical-align:top;
      border:1px solid black;
      line-height:1.25; 
  }
  p{
      width:400px;
      display:inline-block;
      margin:0 0 0 60px;
      vertical-align:top;
      border:1px solid black;
      line-height:1.65; /* but if I change it to something like 1.65 the layout
              breaks */
  }
  </code></pre>
  
  <p>I think it might be concepts that I'm still unfamiliar with like margin-collapse or maybe it's because I'm not writing my CSS properly like not setting a width or height. I apologize if this is a beginner's error.</p>