Difference between div and span

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.

Answer 2

Just wanted to add some historical context to how there came to be span vs div

History of span:

On July 3, 1995, Benjamin C. W. Sittler proposes a generic text container tag for applying styles to certain blocks of text. The rendering is neutral except if used in conjunction of a stylesheet. There is a debate around versus about readability, meaning. Bert Bos is mentioning the extensibility nature of the element through the class attribute (with values such as city, person, date, etc.). Paul Prescod is worried that both elements will be abused. He is opposed to text mentioning that "any new element should be on an old one" and adding "If we create a tag with no semantics it can be used anywhere without ever being wrong. We must force authors to properly tag the semantics of their document. We must force editor vendors to make that choice explicit in their interfaces."

- Source (w3 wiki)

From the RFC draft that introduces span:

First, a generic container is needed to carry the LANG and BIDI attributes in cases where no other element is appropriate; the SPAN element is introduced for that purpose.

- Source (IETF Draft)

History of div:

CENTER was introduced by Netscape before they added support for the HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its widespread deployment.

HTML 3.2 Spec

In a nutshell, both elements arose out of a need for a more generic container that didn't have attached semantics. Span was proposed as a more generic replacement for a <text> element to style text. Div was proposed as a generic way to divide pages and had the added benefit of replacing the <center> tag for center-aligning content. Div has always been a block element because of its history as a page divider. Span has always been an inline element because its original purpose was text styling and today div and span have both arrived at being generic elements with default block and inline display properties respectively.

Answer 3

The difference between < div > and < span > si that < span > doesn't have any default styling, where < div > has a paragraph break. Hence both tags are extremely similar, applying the css property display:inline-block will have a similar effect, but combined with the vertical-align can have a different effect.

Have a look at this link: http://www.brunildo.org/test/inline-block.html