1.参考案例：

image.png

2.代码示例：

  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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>10-margin技巧</title>
  9.     <style>
  10.         .box{
  11.             width: 200px;
  12.             height: 200px;
  13.             background-color: red;
  15.             /* 1.margin  让标签居中 水平居中
  16.              */
  17.              margin:0 auto;
  18.         }
  21.         .box1{
  23.             width: 200px;
  24.             height: 154px;
  25.             border:1px  solid green;
  27.             margin: 50px auto;
  28.         }
  30.         .box1 div{
  31.             height: 30px;
  32.             width: 200px;
  33.             background-color: gold;
  35.             border-top: 1px solid green;
  36.             /* border-bottom: 1px solid green; */
  38.             /* 负值 -1px */
  40.         }
  41.         .first{
  42.             /* margin-top:-1px; */
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  48.     <!-- div.box1>div*5 -->
  49.     <div class="box1">
  50.         <div class="first"></div>
  51.         <div></div>
  52.         <div></div>
  53.         <div></div>
  54.         <div></div>
  55.     </div>
  57.     <div class="box">
  59.     </div>
  61. </body>
  62. </html>

3.效果如下：

image.png

4.相关说明：

  1. 代码参考2018年传智5期python 就业班前端视频。