6_边距.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box1{
  9. width: 200px;
  10. height: 200px;
  11. /* 背景色 */
  12. background-color: red;
  13. /* 外边距 */
  14. /* 表示当前元素距离上下左右的距离都是20px */
  15. /* margin:20px; */
  16. /* 表示当前元素距离上的距离是10px,距离右的距离是20px,距离下的距离是30px,距离左的距离是40px */
  17. /* margin:10px 20px 30px 40px; */
  18. /* 表示上下距离是10px,左右距离是20px */
  19. /* margin: 10px 20px; */
  20. /* 表示上10px 左右20px 下30px */
  21. /* margin:10px 20px 30px; */
  22. /* 表示下20px距离 */
  23. margin-bottom: 20px;
  24. /* 表示上20px距离 */
  25. margin-top: 20px;
  26. /* 表示左20px距离 */
  27. margin-left: 20px;
  28. /* 表示右20px距离 */
  29. margin-right: 20px;
  30. }
  31. .box2{
  32. width: 200px;
  33. height: 200px;
  34. background-color: blue;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="box1"></div>
  40. <div class="box2"></div>
  41. </body>
  42. </html>