Question

What is the difference between div with the property display:inline-block and span with display:inline-block?

Answer 1

There is two differences between div and span elements:

• The div has display:block as default, while span has display:inline as default.
• The div is a block element, and can contain block elements and inline elements, while span is an inline element and can only contain other inline elements.

Once you have applied the display:inline-block they behave the same.

When the HTML code is parsed, the style is not considered. While you can change the display style to make the elements behave the same, you still have to follow the rules in the HTML code.

This for example is valid:

<div>
  <div>
    <span></span>
  </div>
  <span></span>
</div>

This for example is invalid:

<span>
  <div>
    <span></span>
  </div>
  <div></div>
</span>

The browser will try to rearrange the elements in the invalid code, which usually means that it moves the div elements outside the span elements. As the HTML specification (prior to version 5) only told how correct code should be handled, each browser has its own way of dealing with incorrect code.