Are Empty Divs Bad

Are empty divs bad?

From Best Practices for Speeding Up your Webpage

Reduce the Number of DOM Elements

A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.
A high number of DOM elements can be a symptom that there's something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there's a better and more semantically correct way to do your markup.
A great help with layouts are the YUI CSS utilities: grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser's defaults formatting. This is a chance to start fresh and think about your markup, for example use <div>s only when it makes sense semantically, and not because it renders a new line.
The number of DOM elements is easy to test, just type in Firebug's console:
document.getElementsByTagName('*').length
And how many DOM elements are too many? Check other similar pages that have good markup. For example the Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).

how bad is it to use empty div and is there a difference between empty div and span as block elements?

To answer your first question bluntly, yes. If you are resorting to using empty divs to style a page, you need to learn more about the features that CSS provides. Given enough thought, you should be able to set up appropriate margins, or line-heights to make that happen. Or start working on a flexbox layout.

And for your second question, all elements are basically the same. But we appropriate different semantics to provide meaning. Quoted from SO: What is the difference between HTML tags <div> and <span>?:

But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.

So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.

For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.

Is correct using empty div with fixed height for spaces in a website?

Use padding-top, padding-bottom, margin-top, and margin-bottom as needed. Using <div> elements for spacing is bad practice. Here's an example using these CSS attributes to give vertical space both above and below some elements:

HTML

<div>Top text</div>
<div class="spaceAbove">Hello</div>
<div>Middle text</div>
<div class="spaceBelow">World</div>
<div>Bottom text</div>

CSS

.spaceAbove {
    padding-top: 20px;
    //margin-top: 20px;
}

.spaceBelow {
    padding-bottom: 20px;
    //margin-bottom: 20px;
}

See the MDN page on the box model for more information on when and how to use these.

But for your code, I would take a slightly different approach. See this question for some interesting and possibly cleaner alternatives.

What are the advantages or disadvantages of putting our items in an empty div in React?

In most cases the wrapper div is “irrelevant” and is only added because React components require you to return only one element. This kind of behaviour results in useless markup and sometimes even invalid HTML to be rendered, which is bad.

For example we could have a component Table that renders an HTML table and inside that table the columns are rendered with another component called Columns. It would probably look something like this.

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}
class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

This would result in an invalid HTML to be rendered because the wrapper div from Columns component is rendered inside the .

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

React fragments let you group a list of children without adding extra nodes to the DOM because fragments are not rendered to the DOM. So basically we use React.Fragment where we would normally use a wrapper div.

We can make use of fragments with <React.Fragments> syntax. So we could write the Columns component as follows.

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

Is it better to use a div or style content elements when dividing a section on the page?

Using something like this is a Bad Practice and I strongly believe in that.

HTML already has a built-in horizontal divider called <hr/> (short for "horizontal rule"). Bootstrap styles it like this:

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

You Can customize it and use it wherever you want according to your needs.

Is it a bad practice to use divs for styling purposes?

No, it's fine. HTML is a "mark-up language", and mark-up involves styling. Besides, everyone does it. Many of the fluid multi-column layouts rest precisely on this approach.

Doing overlays without an empty div

Using the example you posted, you can use :after instead an empty element. Of course you have to keep in mind that :after is not supported by ie7 and lower. In this case you can use javascript to add an empty element only for ie7 and lower.

Example: http://jsfiddle.net/dppJw/2/

How to make an empty div take space?

It works if you remove floating. http://jsbin.com/izoca/2/edit

With floats it only works if there's some content e.g.

Are Empty Divs Bad