CODEWITHSUNDEEP
htmlcss
Bittu
Bittu

Reputation: 387

Give a line break without using <br/>

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?

Upvotes: 2

Views: 8122

Answers (7)

Tristan Jahier
Tristan Jahier

Reputation: 1147

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.

Upvotes: 2

arifalam91
arifalam91

Reputation: 107

You can try this : 

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

Upvotes: 1

Mathew Thompson
Mathew Thompson

Reputation: 56429

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!

Upvotes: 0

Billy Moon
Billy Moon

Reputation: 58521

You could make it a block level element...

button{
    display: block;
}

see fiddle: http://jsfiddle.net/dwBG4/

Upvotes: 1

defau1t
defau1t

Reputation: 10619

You can display block your button

button{display:block}

Upvotes: 0

Amit
Amit

Reputation: 15387

You can use

#showmenu{
   margin-bottom:10px;
}

Demo

Upvotes: 2

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

With css:

.sidebarmenu{
  margin-top: 20px;
}

Live example: http://jsfiddle.net/BhsYx/

Upvotes: 3

Related Questions