The difference between div and span

Question

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

Answer 1

There are two differences between div and span elements:

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

Once you apply display:inline-block , they behave the same.

When parsing HTML code, style is not considered. Although you can change the display style so that the elements look the same, you should still follow the rules in the HTML code.

This, for example, is valid:

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

This, for example, is not true:

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

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

Answer 2

The difference between <div> and <span> si, span> has no default style, where <div> has a paragraph break. Therefore, both tags are very similar when applying the css property mapping: the inline block will have a similar effect, but in combination with vertical alignment can have a different effect.

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