Adding vertical space between line breaks

Question

This seems like a general 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 all content and attaches CSS to <br> (ie: br {margin: 10px 0}) doesn't seem to work (at least in Chrome), so I'm curious, is this even possible.

Thanks.

jsfiddle

Answer 1

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

try it

Answer 2

You can try it, it works on chrome, content: " " does the trick for chrome, still happy with the fields

Demo

HTML

 <div> 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> 

CSS

 div{ width:150px; border:1px solid #000; padding:5px; } br { content: " "; display: block; margin: 10px; } 

Answer 3

Yes it is possible. There are several questions related to what you need to understand.

1) You use the fields. Sometimes the fields will be collapsed or deleted depending on the content. Have you tried using a gasket instead? You will get different results. I have no direct links other than Google, and make sure you understand the important differences between margins and indentation.

2) Learn about the boxes. If you do not know about the box model: border-box, you need to go through its study. Chris Coyer of css-tricks.com has an article about this. I point this out because it is directly related to issues like this.

3) display: block I don’t know for sure, but I think that perhaps: inline will be displayed by default. You can use any element and always make it act like a standard DIV block if you set the display: block as one of the properties. Again, Chris Coyyer has some great info on this. Please make sure that you have a deep assessment of the display: the rules and their reservations.

Just adding a display: blocking and using margins or indents will fix your problem. If this is not so, then something stupid is just missing me. I used to do this. In fact, I completely removed the tags from the Wordpress theme markup, using display: none to completely reformat the gallery output images.