4.padding和margin.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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. *{
  9. margin: 0;
  10. padding: 0;
  11. list-style: none;
  12. text-decoration: none;
  13. box-sizing: border-box;
  14. }
  15. .box {
  16. width: 300px;
  17. height: 300px;
  18. background: #0f0;
  19. /* margin-left: 100px; */
  20. padding: 20px;
  21. border:2px solid #f00;
  22. /* margin: 30px 50px 80px 100px; */
  23. }
  24. /*
  25. margin 外边距 复合属性 边框外面
  26. 一个值:上下左右
  27. 两个值:上下 左右
  28. 三个值:上 左右 下
  29. 四个值:上 右 下 左
  30. margin-left 左
  31. margin-right 右
  32. margin-top 上
  33. margin-bottom 下
  34. padding 内边距 复合属性 内容和边框之间
  35. 一个值:上下左右
  36. 两个值:上下 左右
  37. 三个值:上 左右 下
  38. 四个值:上 右 下 左
  39. padding-left 左
  40. padding-right 右
  41. padding-top 上
  42. padding-bottom 下
  43. */
  44. p {
  45. text-indent: 2em;
  46. }
  47. p span {
  48. margin-left: 37px;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div class="box">
  54. 这是一段文字
  55. </div>
  56. <p>这是一段文字这是一段文字这是一段文字这是一段文字<br>
  57. <span>这是一段文字这是一段文字这是一段文字</span></p>
  58. </body>
  59. </html>