Removing extra border caused by line height

Question

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:

I have tried several mothds, for example wrapping the paragraph in a div and setting the negative margin, but doesnt seem to work.

Here's simple css:

p{
    margin: 20px;    
    line-height: 2;    
    border-left: 5px solid green;
}

Demo: http://jsfiddle.net/0et4gq16/

Edit: The line height should not be changed.

Answer 1

Just draw the line manually!

p{
    margin: 20px;    
    line-height: 2;
    position: relative;
}
p:after {
    content: " ";
    display: block;
    width: 5px;
    background: green;
    position: absolute;
    left: -5px;
    top: 0.5em;
    bottom: 0.5em;
}

fiddle

Answer 2

If you are not willing to change the line-height property, then I am afraid it is not possible.

The margin property defines the space between your p with border and the rest of the "world". But line-height is space before and after the line, not between the lines.

So, the border aligns itself as close to the text as possible, taking line-height in regard.