What's the different between <div> and <span> if I set display: block or inline to them?

Question

<div style="display: inline"></div>
<span></span>

<div></div>
<span style="display:block></span>

<div style="display: inline-block"></div>
<span style="display: inline-block"></span>

If I write like this, what's the different between <div> and <span>

Answer 1

In terms of CSS, there is no difference. You can style any element regardless of its semantics however you like.

Likewise, in terms of HTML, how you style them with CSS does not affect their nature. A <div> always accepts any flow content, which is typically represented as block-level elements in CSS, or phrasing content, which is typically represented as inline elements in CSS. Note however that there isn't a necessary correlation between the two concepts. A <span> on the other hand can only have phrasing content.

In valid HTML, this means while a <div> can contain a <span>, a <span> cannot contain a <div>.

Both elements are similar in that they carry no semantics by themselves; they simply function as grouping elements for their contents, typically used for styling purposes.

See the HTML5 spec for <div> and <span> for more details.

Answer 2

div

• A "block-level element"
• can contain all other elements!
• can only be inside other block-level elements
• defines a rectangular region on the page
• tries to be as wide as possible
• begins on a "new line", and has an "carriage return" at the end, like a <p>

span

• An "inline element"
• cannot contain block-level elements!!
• can be inside any other element
• defines a "snake" on the page
• tries to be as small as possible
• doesn't create any new lines

From a rendering point of view,

<span> == <div style="display: inline">

and

<div> == <span style="display: block">

As for HTML syntax, however, a div cannot be nested inside an inline element, whereas a span cannot contain block-level elements.

The mysterious "display: inline-block"

block vs inline vs inline-block

Below are a bunch of with different display: settings.

As you can see, inline-block is a hybrid that:

• Creates a rectangular region (a block)
• Doesn't create any new lines (hence "in line")

For more information

Div's with display inline-block display weird (CSS)

Difference between DIV as-is and a SPAN with display:block

http://quirksmode.org/css/css2/display.html