23

Is it a bad practice to use <div> tags to express gaps between elements? If yes - why is it so?

Here's an example:

<div class="panel">
    <!-- Content -->
</div>

<div class="spacer"></div>

<div class="panel">
    <!-- Content -->
</div>

The CSS:

div.spacer
{
    font-size: 0; 
    height: 10px;
    line-height: 0;
}
Emanuil Rusev
  • 34,563
  • 55
  • 137
  • 201
  • 2
    I think this one is quite questionable. Spacers are, after all, largely a presentational element. If you need to use them to clear floats though, that's a different matter. – BoltClock Mar 03 '11 at 16:46
  • There's almost always a better way to do the job of a spacer div. In 99% of cases, you don't need it. [Here's an example](http://stackoverflow.com/questions/4616715/overflowing-a-container-div-horizontally-but-not-vertically) where it was arguably required. (my `br` could've easily been a `div`). – thirtydot Mar 03 '11 at 16:56
  • I'm using a list of summary div's, each followed by a collapsible div that opens or closes when the summary div is clicked. Margins are a hassle in this scenario, a spacer div under each collapsible div was the simplest solution. – Elise van Looij Aug 23 '19 at 11:55

4 Answers4

19

It's bad if you could add a margin to content instead. Otherwise, it's the best HTML element for spacers.

Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
12

Yes, its bad — unnecessary markup. Use margin-top/margin-bottom instead.

benhowdle89
  • 36,900
  • 69
  • 202
  • 331
  • 8
    Yes, it's more markup but it makes the design more modular. You can change the second `div.panel` with another element and the gap will remain. Isn't that a good thing? – Emanuil Rusev Mar 03 '11 at 16:53
  • If you choose to stick with all margin-bottoms then your gap will remain when you replace the div – benhowdle89 Mar 03 '11 at 17:09
  • 3
    That's not the point. The point is the gap depends on particular elements when you use margins. – Emanuil Rusev Mar 04 '11 at 01:37
  • 4
    Not sure it's actually so black and white. It makes the layout MUCH easier to maintain at the cost of a few bytes of html. Keeps CSS files minimal and allows you to adjust white space very rapidly. – Shawn Whinnery Mar 25 '14 at 21:36
  • 7
    It's considered "bad" only because people don't think about a gap as a thing, but a distance of things. The truth is, both cases can occur. If you put 7 similar things next to each other and you want to put a separator somewhere among them, it's expressly recommended to use an individual element as a separator. This way, all the same-level items' markup and styling can remain the same and your structure stays consistent. Margins have their purpose, but it's definitely not "put some gap after the 3rd element", even though you can do it from CSS. Don't fall for simplified thinking. – dkellner Jun 12 '16 at 13:15
2

It is unsemantic and unnecessary.

By adding:

padding-bottom: 10px;

or

margin-bottom: 10px;

to your div.panel CSS declaration you can save yourself multiple characters (thus reducing bandwidth costs) and have cleaner code that expresses what you mean not how you want it to look.

Sean Vieira
  • 155,703
  • 32
  • 311
  • 293
  • 16
    You're right, but I have to laugh about your ~50 byte bandwidth cost. Dude, you're cheap! – bpeterson76 Mar 03 '11 at 16:54
  • 1
    @bpeterson76 -- *Laughs* That does make it sound like it, doesn't it! :-D I was imagining much more markup than this with `div.spacer` repeated multiple times on each page. (And to be fair, this would only start hurting the pocketbook when you got big ... but it *is* another argument against the practice ;-) ) – Sean Vieira Mar 03 '11 at 17:19
  • @SeanVieira Seems like a micro-optimization. If you're working on the Google homepage, then sure. Otherwise, I can nearly guarantee you have bigger fish to try. – Dan Bechard Jan 05 '16 at 14:59
  • 1
    It can be more semantic than a margin or a padding - it only depends on what the gap represents. It can be a distance, it can be a separator, it can be a placeholder for something that comes later. Thumb rule is: if the gap belongs to an element (that one element just needs the gap wherever it goes), make it a margin. If no elements need the gap by themselves but two elements require it (e.g. between them), use an extra div. It has its own purpose then. – dkellner Jun 12 '16 at 13:20
0

It's not a good coding style for web stuff.

All (block) elements contain everything you need for create paddings/layout. Like the other ppl mentioned: use margins, paddings etc - the box model.

Too much of markup = more problems positioning something = needless markup.

ChrisBenyamin
  • 1,718
  • 4
  • 22
  • 39