Adding Vertical Space between Line Breaks

Question

This seems like a common CSS question, but for some reason I cannot find the answer to it.

consider the following Code:

<div style="width:50px;border:1px solid #000">
    THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
    <br/>
    2nd line
    <br/>
    3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 
    <br/>
    last line
</div>

With CSS ONLY I want to add vertical space between the <br/> tags.

line-height works for the entire content, and attaching CSS to <br> (i.e: br{ margin:10px 0}), doesn't seem to work either (in Chrome at least), so I am wondering if this is even possible.

Thank you.

jsfiddle

​

Answer 1

br
{
    content: " " !important;
    display: block !important;
    margin:30px;
}

​try this