How do I simulate <br/> (the br tag) using CSS?

Question

I have the following line of css and html here:

CSS:

.top, .title {
font-weight: bold;
}
.bottom, .Content {
}

HTML:

<span class='title'>Title</span>
<br/>
<span class='Content'>Content</span>
<br/><br/>

I would like to replace the <br/> tag with an equivalent in CSS, but I am struggling with it. I would appreciate any help.

I've tried margin-bottom, margin-top, line-height, none of it worked.

Answer 1

You can simulate BR tags width CSS like this:

span:after {
    content: ' ';
    display: block;
}

Use the selector ":before" if you need the "br" been simulated before the span content

jsfiddle

Answer 2

<span> is an inline element, so can't have margin applied, but it can take padding - give it something like .title { padding: 10px 0; } and it'll simulate a paragraph, or just .title { display: block; } to force the next thing to go beneath it.