css_line_height.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html LANG="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>CSS Line Height Inheritance</title>
  6. <style type="text/css">
  7. <!--
  8. h1 {margin-top: 0; margin-bottom: 0;}
  9. h2 {font-size: 125%; margin-top: 0;}
  10. h3 {font-size: medium; margin-bottom: .5ex;}
  11. div {border: 1px solid red;}
  12. div div {border: 1px solid blue;}
  13. a:link img, a:visited img { border-style: none;}
  14. .admin {
  15. background-color: #E0E0FF;
  16. width: 15ex;
  17. margin: 2ex;
  18. padding: 1ex;
  19. text-align: center;
  20. font-size: .85em;
  21. border: 0;
  22. z-index: 10;
  23. }
  24. -->
  25. </style>
  26. </head>
  27. <body>
  28. <h1>Use only &lt;number&gt; for line-height</h1>
  29. <h2>unless you like solving inexplicable inheritance problems or setting an explicit line-height on every element</h2>
  30. <h3>div {line-height: 1}; div div {font-size: 200%}</h3>
  31. <div style="line-height: 1;">The quick brown fox<br>jumps over the crazy
  32. <div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
  33. <h3>div {line-height: 1em}; div div {font-size: 200%}</h3>
  34. <div style="line-height: 1em;">The quick brown fox<br>jumps over the crazy
  35. <div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
  36. <h3>div {line-height: 100%}; div div {font-size: 200%}</h3>
  37. <div style="line-height: 100%;">The quick brown fox<br>jumps over the crazy
  38. <div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
  39. <div class="updir" style="border: 0; margin-top: 2ex;">
  40. <p>When rendered according to the
  41. <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height">css 2.1 spec</a>,
  42. the 200% text in the second two div divs, those for which line-height of the parent
  43. are specified in em or %, will overlap, the child divs being 1/2 the height of their containing
  44. divs; while the first div div will be 2/3 the height of its containing div,
  45. and its text won't overlap. The overlapping text in the latter div divs is because the spec requires the calculated
  46. line-height specified in em or % be inherited by the children. In contrast, it is &lt;number&gt; itself that is inherited by
  47. the children, which allows the line-height specified to be applied in reference to the font-size of the child div instead of
  48. the ancestor.</p>
  49. <hr>
  50. <a href="http://fm.no-ip.com/Auth/IE/line-heightIE.html">IE has an additional problem with line-height.</a>
  51. <hr>
  52. </div>
  53. <div class="admin">
  54. <a href="http://validator.w3.org/check/referer">
  55. <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a>
  56. <br>
  57. Last Modified<br>2005.11.29<br>&#169; Felix Miata<br>
  58. <A HREF="http://fm.no-ip.com/Auth/">Felix's Home</A>
  59. </div>
  60. </body>
  61. </html>