html - Behavior of child divs with parent spans - Stack Overflow

admin管理员组

文章数量:1245106

this is probably a dumb question, but I can't figure it out, so I'm asking the community.

Divs are block level elements which force a new line for each element. Spans are inline elements which don't. If I wrap a div with a span, why doesn't it make the div behave like an inline element (like inline-block)?

See example code below. I would have expected the two divs to appear next to each other and not above and below each other (as if the spans were not there).

.box {width: 200px; height: 200px; background: blue;}

<span>
    <div class="box">Box1</div>
</span>
<span>
    <div class="box">Box2</div>
</span>

this is probably a dumb question, but I can't figure it out, so I'm asking the community.

Divs are block level elements which force a new line for each element. Spans are inline elements which don't. If I wrap a div with a span, why doesn't it make the div behave like an inline element (like inline-block)?

See example code below. I would have expected the two divs to appear next to each other and not above and below each other (as if the spans were not there).

.box {width: 200px; height: 200px; background: blue;}

<span>
    <div class="box">Box1</div>
</span>
<span>
    <div class="box">Box2</div>
</span>

Note: I know this is not a correct use of span. A student of mine made this mistake and I was surprised that it did not affect the behavior of the divs.

• html

Share Improve this question Follow edited Feb 17 at 13:51 David 219k4040 gold badges226226 silver badges323323 bronze badges asked Feb 17 at 13:43 Peter BPeter B 2722 bronze badges 10

• The divs still have display: block from the user agent stylesheet. – C3roe Commented Feb 17 at 13:51
• @C3roe Not sure you are correct. Following your logic, changing the divs to spans and the spans to divs in my code example above should display Span1 Span2 on the same line, since span still has display: inline from the user agent stylesheet. But it displays Span1 and Span2 on different lines. So the divs seem to convert the spans to display: block, but the spans don't convert the divs to display: inline. – Peter B Commented Feb 18 at 9:17
• "But it displays Span1 and Span2 on different lines." - of course it does, because the outer divs cause those two "lines." – C3roe Commented Feb 18 at 9:26
• 'of course it does, because the outer divs cause those two "lines."' I may be missing something, but if the parent divs cause the two children (spans) to appear on different lines, why don't the parent spans cause the two children (divs) to appear on the same line? – Peter B Commented Feb 18 at 14:14
• The spans will be as wide, as their content requires. The div inside the span goes over the full width, ergo its parent span also goes over the full width. And two elements that go over the full width, can only be displayed one below the other, not next to each other. – C3roe Commented Feb 18 at 14:20

 |  Show 5 more comments

1 Answer 1

Sorted by: Reset to default 0

A 'div' is a block element, and a 'span' is an inline element, so you can't place a 'div' inside a 'span'.

Block elements cannot be placed inside inline elements because inline elements are meant to contain only text or other inline elements, not larger block elements. This rule helps maintain a clear webpage structure, improves accessibility, and ensures consistent display across all browsers.

Here are official sources explaining why inline elements cannot contain block elements:

Block-level content Inline-level content

These sources cover the differences between block and inline elements and why inline elements should only contain text or other inline elements.

本文标签： htmlBehavior of child divs with parent spansStack Overflow