title: Removing extra border caused by line height
body: <p>I want to set left border for a paragraph, but the border has extra height because of line height. I want to remove the height of the border which exceeds the top and bottom of the text. See the screenshot:
  <img src="https://i.stack.imgur.com/9fMos.png" alt="enter image description here"></p>
  
  <p>I have tried several mothds, for example wrapping the paragraph in a div and setting the negative margin, but doesnt seem to work.</p>
  
  <p>Here's simple css:</p>
  
  <pre><code>p{
      margin: 20px;    
      line-height: 2;    
      border-left: 5px solid green;
  }
  </code></pre>
  
  <p><strong>Demo:</strong>
  <a href="http://jsfiddle.net/0et4gq16/" rel="nofollow noreferrer">http://jsfiddle.net/0et4gq16/</a></p>
  
  <p>Edit: The line height should not be changed.</p>