line-height-1-ref.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <style>
  3. div {
  4. width:100px;
  5. height:600px;
  6. margin:5px 0 0 5px;
  7. font-size: 30px;
  8. float:left;
  9. }
  10. div#one {
  11. line-height: 300%;
  12. }
  13. div#two {
  14. line-height: 100px;
  15. }
  16. div#three {
  17. line-height: 110px;
  18. }
  19. div#four {
  20. line-height: 20px;
  21. }
  22. div#five {
  23. line-height: 12px;
  24. }
  25. div#six {
  26. line-height: 12px;
  27. }
  28. div#seven {
  29. line-height: 12px;
  30. }
  31. div#eight {
  32. line-height: 12px;
  33. }
  34. div#nine {
  35. line-height: 12px;
  36. }
  37. div#nine {
  38. line-height: 12px;
  39. }
  40. div#ten {
  41. line-height: 12px;
  42. }
  43. div#div-11 {
  44. line-height: 15px;
  45. }
  46. div#div-12 {
  47. line-height: 195px;
  48. }
  49. </style>
  50. <div id="one">line height is 300%</div>
  51. <div id="two">line height is 100px</div>
  52. <div id="three">line height is 50px</div>
  53. <div id="four">line height is 10px * 2</div>
  54. <div id="five">line height is 50% - 3px</div>
  55. <div id="six">line height is 25% - 3px + 25%</div>
  56. <div id="seven">line height is 25% - 3px + 12.5% * 2</div>
  57. <div id="eight">line height is 25% - 3px + 12.5%*2</div>
  58. <div id="nine">line height is 25% - 3px + 2*12.5%</div>
  59. <div id="ten">line height is 25% - 3px + 2 * 12.5%</div>
  60. <div id="div-11">line height is 30% + 20%</div>
  61. <div id="div-12">line height is 3 * 2 + 3 / 6</div>
  62. </html>