CODEWITHSUNDEEP
csshtml
TheBoss
TheBoss

Reputation: 2044

Why does an inline div behave differently to a span?

Given the following two blocks of HTML markup:

<div style="overflow:auto; line-height:22px;">
  <div style="float:left; display:inline;">Write</div>
  <div style="float:left; display:inline; font-size:20px;">on the</div>
  <div style="float:left; display:inline; font-size:20px;">same line</div>
</div>

<div style="line-height:22px;">
  <span>Write</span>
  <span style="font-size:20px;">on the</span>
  <span style="font-size:20px;">same line</span>
</div>

Why do they display the same thing differently? A span is an inline element, yet the text "Write" vertically aligns differently with "on the" and "same line" regardless of the div displaying as inline. Shouldn't it render the line in exactly the same manner?

Upvotes: 0

Views: 149

Answers (1)

BoltClock
BoltClock

Reputation: 723498

Your divs are floating. They cannot be inline if they're floating.

If you remove the floats (and subsequently the overflow: auto on the parent since that won't be necessary), then they'll behave like inline elements:

<div style="line-height:22px;">
  <div style="display:inline;">Write</div>
  <div style="display:inline; font-size:20px;">on the</div>
  <div style="display:inline; font-size:20px;">same line</div>
</div>

Upvotes: 5

Related Questions