margin-padding-ref.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!DOCTYPE html>
  2. <html>
  3. <link rel='stylesheet' type='text/css' href='style.css'>
  4. <style>
  5. body > div:nth-child(1) { margin: 10px; padding: 0px; }
  6. body > div:nth-child(2) { margin: 0px; padding: 10px; }
  7. body > div:nth-child(3) { margin: 10px; padding: 10px; }
  8. body > div:nth-child(4) { margin: 5px; padding: 5px; }
  9. body > div:nth-child(5) { margin: 50px; padding: 50px; }
  10. body > div:nth-child(6) { margin: 100px; padding: 100px; }
  11. body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
  12. body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
  13. body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
  14. body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
  15. body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
  16. body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
  17. body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
  18. body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
  19. body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
  20. body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
  21. </style>
  22. <body>
  23. <div class="meter-element">
  24. <div class="meter-bar">
  25. </div>
  26. </div>
  27. <div class="meter-element">
  28. <div class="meter-bar">
  29. </div>
  30. </div>
  31. <div class="meter-element">
  32. <div class="meter-bar">
  33. </div>
  34. </div>
  35. <div class="meter-element">
  36. <div class="meter-bar">
  37. </div>
  38. </div>
  39. <div class="meter-element">
  40. <div class="meter-bar">
  41. </div>
  42. </div>
  43. <div class="meter-element">
  44. <div class="meter-bar">
  45. </div>
  46. </div>
  47. <div class="meter-element">
  48. <div class="meter-bar">
  49. </div>
  50. </div>
  51. <div class="meter-element">
  52. <div class="meter-bar">
  53. </div>
  54. </div>
  55. <div class="meter-element">
  56. <div class="meter-bar">
  57. </div>
  58. </div>
  59. <div class="meter-element">
  60. <div class="meter-bar">
  61. </div>
  62. </div>
  63. <div class="meter-element">
  64. <div class="meter-bar">
  65. </div>
  66. </div>
  67. <div class="meter-element">
  68. <div class="meter-bar">
  69. </div>
  70. </div>
  71. <div class="meter-element">
  72. <div class="meter-bar">
  73. </div>
  74. </div>
  75. <div class="meter-element">
  76. <div class="meter-bar">
  77. </div>
  78. </div>
  79. <div class="meter-element">
  80. <div class="meter-bar">
  81. </div>
  82. </div>
  83. <div class="meter-element">
  84. <div class="meter-bar">
  85. </div>
  86. </div>
  87. </body>
  88. </html>