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.
Share Improve this question edited Feb 17 at 13:51 David 219k40 gold badges226 silver badges323 bronze badges asked Feb 17 at 13:43 Peter BPeter B 272 bronze badges 10 | Show 5 more comments1 Answer
Reset to default 0A '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.
display: block
from the user agent stylesheet. – C3roe Commented Feb 17 at 13:51display: inline
from the user agent stylesheet. But it displays Span1 and Span2 on different lines. So the divs seem to convert the spans todisplay: block
, but the spans don't convert the divs todisplay: inline
. – Peter B Commented Feb 18 at 9:17