Home/ Questions/Q 6124097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:05:37+00:00

Consider the following HTML markup. In most browsers that I have tested, the second

  • 0

Consider the following HTML markup. In most browsers that I have tested, the second list is displayed differently (each list item is indented).

The only difference between the two lists relates to the CSS font-style property, which I would not expect to change the list layout. Is there a explanation for this behavior?

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {font-family: sans-serif}
            span {float: left}
            ul.bad span {font-style: italic}
        </style>
    </head>
    <body>
        <ul>
            <li><span>foo</span></li>
            <li><span>foo</span></li>
            <li><span>foo</span></li>
            <li><span>foo</span></li>
        </ul>
        <ul class="bad">
            <li><span>foo</span></li>
            <li><span>foo</span></li>
            <li><span>foo</span></li>
            <li><span>foo</span></li>
        </ul>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The span span with the straight text becomes 18 pixels in height, while the italic text forces the span to 19 pixels.

    This causes a slightly different behaviour when using float: left.

          span // <-- height: 18px;
 .bad span // <-- height: 19px;

    a quick fix would be to set the line height property equal for both span types:

      span {float:left; line-height:15px;}

    not regarding the intentions of your code 😉

    • 0