Geek Answers Handbook

Change CSS layout using font style

Consider the following HTML markup. In most browsers I 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 an 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>
+5
source share
3 answers

A span spanwith straight text becomes 18 pixels in height, and italic text forces from spanup to 19 pixels .

When used float: left, a slightly different behavior occurs.

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

a line height span:

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

;)

+4

, sans-serif, , ( ). , verdana, ,

0

The layout will depend on the actual fonts used to replace "sans-serif". Therefore, you will need to select the correct font name.

I see no differences in all major browsers on Windows (7), see http://jsfiddle.net/uTjSd/ It seems that "sans-serif" is allowed by "Arial" in all of them.

0
source

More articles:


All Articles