Give a line break without using <br/> - html

Question

I have a button over my div.
<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu">
Some code
</div>
The div is displayed right below the button. I want the button to be displayed with a line break. I know it is a bad practice to use <br/>. How do I give space without it?

Answer 1

With css:
.sidebarmenu{
margin-top: 20px;
}
Live example: http://jsfiddle.net/BhsYx/

Answer 2

You can use
#showmenu{
margin-bottom:10px;
}
Demo

Answer 3

The right way to make a line break is to use <br>.
To put some space between block elements though, you can use CSS properties like margin (external) or padding (internal). But margin is not line break. <br> means line break, and renders as an empty space. Margins are another way to render empty space, but this is not equivalent because it does not impact the same things.

Answer 4

You could make it a block level element...
button{
display: block;
}
see fiddle: http://jsfiddle.net/dwBG4/

Answer 5

You can try this :
<button id="showmenu" type="button">Show menu</button>
<div class="sidebarmenu" style="margin-top:20px" >
Some code
</div>

Answer 6

You can display block your button
button{display:block}

Answer 7

Not exactly bad practice in your given scenario really. It's only bad practice when you see something like:
<div>
</div>
<br />
<br />
<input />
<br />
<br />
But you're wanting to use it to control text, so use it! This reminds me of when you see people hating on tables, yet use display: table and display: table-cell on a divs!