• 目录

盒子模型：margin

阅读量: 62 编辑

盒子模型

盒子模型就是一个标签块，比如有一定长、宽的div块；

因为标签一般会相邻、嵌套关系，所以用盒子模型来表达这种关系；

一、盒子模型：margin

（div）标签与相邻（div）标签的外边距离

  • margin:10px; 表示四边的外边距是10像素

  • 还可以单独写 margin-top、margin-right、margin-bottom、margin-left

  • margin:10px 20px 10px 20px; 表示 上、右、下、左

  • margin:10px 20px; 表示上下、左右

二、代码实战

代码的详细解读，可以参考视频教程。

新建 html 文件 10-margin.html ，编写下方程序，运行看看效果吧

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>盒子模型margin</title>
        
        <style type="text/css">
            div{
              width: 200px;
              height: 200px; 
              float: left;
            }
            .div-1{
                background-color: tan;
            }
            .div-2{
                background-color: silver;
                /**margin-top: 20px;
                margin-bottom: 20px;
                margin-left: 20px;
                margin-right: 20px;**/
                /**
                margin: 20px;**/
                /**
                margin:0px 50px 10px 100px;**/
                margin:10px 100px;
            }
            .div-3{
                background-color: red;
            }
        </style>
    </head>
    
    <body>

        <div class="div-1"></div>
        <div class="div-2"></div>
        <div class="div-3"></div>
    </body>
    
</html>
  • 目录