1.margin{top,right,bottom,left}

mangin:一个参教四个方向都会散变
二个参数第一个参数top, bottomi第二个参数Left,right
三个参数第一个top第二个参数might,left第三个参数bottom

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         div {
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: red;
  13.             /*
  14.         top, right, bottom,Left
  15.         mangin:一个参教四个方向都会散变
  16.         二个参数第一个参数top, bottomi第二个参数Left,right
  17.         三个参数第一个top第二个参数might,left第三个参数bottom
  18.         */
  19.             margin: 100px 200px 300px 400px;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <div>
  27.     </div>
  28. </body>
  30. </html>

2.margin,border,padding,content

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* margin,borde,padding,content */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 10px;
            margin-top: 100px;
            border: 1px solid #333;
            /*top,right,bottom, right*/
            padding-left: 100px;
            padding-right: 100px;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>