Style-wise <br> or padding/margin elements

Question

These days with HTML5 and CSS3, is the use of <br> tags frowned upon when margin/padding can be used?

EDIT: This is in regards to spacing between div elements for my use case, but general best practice advise is also welcome.

Answer 1

There are actually pretty well-defined rules around its usage, harking back to the days of HTML 2.0 when it was first introduced:

The <BR> element specifies a line break between words (see 6, "Characters, Words, and Paragraphs"). For example:

<P> Pease porridge hot<BR> Pease porridge cold<BR> Pease porridge in the pot<BR> Nine days old. 

The <br> element itself was never intended to be used to control margin/padding. Although they introduced a presentational clear attribute to HTML 3.2 to handle things like floating images, it was soon deprecated in HTML 4 and XHTML 1 in favor of CSS. That was almost 15 years ago, so it's really nothing new.

In HTML5, they've made it much clearer that <br> isn't intended for presentation or layout, with examples (and the clear attribute is obsolete):

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

The following example is correct usage of the br element:

<p>P. Sherman<br> 42 Wallaby Way<br> Sydney</p> 

br elements must not be used for separating thematic groups in a paragraph.

The following examples are non-conforming, as they abuse the br element:

<p><a ...>34 comments.</a><br> <a ...>Add a comment.</a></p> <p><label>Name: <input name="name"></label><br> <label>Address: <input name="address"></label></p> 

Here are alternatives to the above, which are correct:

<p><a ...>34 comments.</a></p> <p><a ...>Add a comment.</a></p>  <p><label>Name: <input name="name"></label></p> <p><label>Address: <input name="address"></label></p> 

So using <br> in lieu of CSS margins for layout purposes has always been frowned upon, at least by the people who wrote the specifications.