Home/ Questions/Q 8959443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T15:26:23+00:00

Given the following two blocks of HTML markup: <div style=overflow:auto; line-height:22px;> <div style=float:left; display:inline;>Write</div>

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0