-2

What is the difference between a DIV with display: inline-block and a SPAN ?

Simalarly, between a SPAN with display: block and a DIV.

David
  • 1,051
  • 5
  • 14
  • 28
  • 1
    `span` default display is inline not inline-block. – Musa Dec 17 '13 at 23:00
  • Googling `What is the difference between a DIV with display: inline-block and a SPAN` seems to yield relevant results? – Pekka Dec 17 '13 at 23:00
  • But SO is so much more fun. – David Dec 17 '13 at 23:01
  • possible duplicate of [What is the difference between HTML tags DIV and SPAN?](http://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span) – Jukka K. Korpela Dec 17 '13 at 23:02
  • 1
    I'd love to know why my answer was downvoted. – Joe Love Dec 17 '13 at 23:05
  • I wouldn't say that this is a duplicate of that specific question, as this one queries specifically the `inline-block` and `inline` display attributes. There probably is a similar question somewhere though. – arandompenguin Dec 17 '13 at 23:07

3 Answers3

1

There will only be a semantic difference per se between the two, given the correct styles, both will probably display the same.

However, some browsers may or may not display correctly. Also, you can't nest block elements in spans, that is invalid HTML, and may cause some browsers to choke or display incorrectly.

Divs are block elements, spans are inline elements. Don't do that is the bottom line, it will make things messed up.

Also, spans have the style display:inline, not display:inline-block

scrblnrd3
  • 7,228
  • 9
  • 33
  • 64
1

From the W3 Specification:

inline-block This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

inline This value causes an element to generate one or more inline boxes.

You can see how they differ visually here.

arandompenguin
  • 433
  • 3
  • 12
0

First and foremost, a span, by default is display:inline.

According to w3schools, the difference between display:inline and display:inline-block is

  • An inline element has no line break before or after it, and it tolerates HTML elements next to it.

    A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.

    An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

Joe Love
  • 5,594
  • 2
  • 20
  • 32