Removing extra border caused by line height

Question

I want to set a left border for a paragraph, but the border has extra height due to the height of the line. I want to remove a border height that exceeds the top and bottom of the text. See screenshot:

I tried a few mothds, like wrapping a paragraph in a div and setting a negative margin, but it doesn't seem to work.

Here is a simple css:

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

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

Edit: line height should not be changed.

Answer 1

Just draw a line by hand!

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 do not want to change the property line-height, I am afraid that this is not possible.

margin p "". line-height - , .

, , line-height .

Answer 3

To remove the border above p, you can add the following css:

p::first-line{
    line-height: 1;
}

this, however, will reduce the line height between the first and second lines.

Demo

Answer 4

its impossible without changing the height of the line using css .... you can make its image if you want,

Answer 5

dirty as hell but it meets the requirements

<div>
    <div id="border"><div>
    <div id="content">
        <p>Nulla accumsan massa blandit ligula pellentesque dictum. Cras blandit lorem quis ultrices faucibus. Phasellus sed odio vulputate, euismod dui ac, dapibus justo. </p>
    </div>
</div>

using css:

p{
    margin: 20px;    
    line-height: 2;     
}
#border{
    display:inline-block;
    border-right:5px solid green;
    width:5px;
    margin:20px;
}
#content{
    display:inline-block;
    width:400px;
    margin:-30px 0 -30px -8px;
}

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