8  外边距和内边

  

margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离;
Border(边框) 围绕在内边距和内容外的边框。
Content(内容) 盒子的内容,显示文本和图像。

元素的宽度和高度:

Remark重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。.

margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下  右左
margin:10px;    ---------------------上右下左

下面的例子中的元素的总宽度为300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;   

练习: 300px*300px的盒子装着100px*100px的盒子,分别通过margin和padding设置将小盒子 移到大盒子的中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
           <div class="div2"></div>
       </div>
</body>
</html>

  

 

修改css_attribute.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        p{
            /*color: rgb(125,200,40);*/
            /*color: rgba(255,0,0,1);*/
            font-size: 45px
        }
        p{
            font-style: italic;
        }
        p{
            font-family: "Times New Roman";
        }
        p{
            font-weight: lighter;
        }

        #div1{
            height: 600px;
            background-color: rebeccapurple;
            background-image: url("12.jpg");
            background-repeat: no-repeat;
            background-size: 100px 100px;
            /*background: url("12.jpg") no-repeat 100px 100px red;*/
        }
    </style>
</head>
<body>

<!--<p>hello p</p>-->
<div id="div1"></div>

</body>
</html>

点击pycharm上面浏览器

修改css_attribute.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        p{
            /*color: rgb(125,200,40);*/
            /*color: rgba(255,0,0,1);*/
            font-size: 45px
        }
        p{
            font-style: italic;
        }
        p{
            font-family: "Times New Roman";
        }
        p{
            font-weight: lighter;
        }

        #div1{
            height: 600px;
            background-color: rebeccapurple;
            background-image: url("12.jpg");
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: center;
            /*background: url("12.jpg") no-repeat 100px 100px red;*/
        }
    </style>
</head>
<body>

<!--<p>hello p</p>-->
<div id="div1"></div>

</body>
</html>

点击pycharm上面浏览器

修改css_attribute.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        p{
            /*color: rgb(125,200,40);*/
            /*color: rgba(255,0,0,1);*/
            font-size: 45px
        }
        p{
            font-style: italic;
        }
        p{
            font-family: "Times New Roman";
        }
        p{
            font-weight: lighter;
        }

        #div1{
            height: 300px;
            background-color: rebeccapurple;
            background-image: url("12.jpg");
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: center;
            /*background: url("12.jpg") no-repeat 100px 100px red;*/
        }
    </style>
</head>
<body>

<!--<p>hello p</p>-->
<div id="div1"></div>

</body>
</html>

点击pycharm上面浏览器

修改css_attribute.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        p{
            /*color: rgb(125,200,40);*/
            /*color: rgba(255,0,0,1);*/
            font-size: 45px
        }
        p{
            font-style: italic;
        }
        p{
            font-family: "Times New Roman";
        }
        p{
            font-weight: lighter;
        }

        #div1{
            height: 300px;
            background-color: rebeccapurple;
            background-image: url("12.jpg");
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: center center;
            /*background: url("12.jpg") no-repeat 100px 100px red;*/
        }
    </style>
</head>
<body>

<!--<p>hello p</p>-->
<div id="div1"></div>

</body>
</html>

点击pycharm上面浏览器

 

修改css_attribute.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        p{
            /*color: rgb(125,200,40);*/
            /*color: rgba(255,0,0,1);*/
            font-size: 45px
        }
        p{
            font-style: italic;
        }
        p{
            font-family: "Times New Roman";
        }
        p{
            font-weight: lighter;
        }

        #div1{
            height: 300px;
            background-color: rebeccapurple;
            background-image: url("12.jpg");
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: left center;
            /*background: url("12.jpg") no-repeat 100px 100px red;*/
        }
    </style>
</head>
<body>

<!--<p>hello p</p>-->
<div id="div1"></div>

</body>
</html>

点击pycharm上面浏览器

修改css_attribute.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        p{
            /*color: rgb(125,200,40);*/
            /*color: rgba(255,0,0,1);*/
            font-size: 45px
        }
        p{
            font-style: italic;
        }
        p{
            font-family: "Times New Roman";
        }
        p{
            font-weight: lighter;
        }

        #div1{
            height: 300px;
            background-color: rebeccapurple;
            background-image: url("12.jpg");
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: top center;
            /*background: url("12.jpg") no-repeat 100px 100px red;*/
        }
    </style>
</head>
<body>

<!--<p>hello p</p>-->
<div id="div1"></div>

</body>
</html>

点击pycharm上面浏览器

用pycharm新建box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 200px;
            background-color: rebeccapurple;
        }
        .div2{
            height: 200px;
            background-color: green;
        }
        .div3{
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

点击pycharm上面浏览器

修改box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
        }
        .div2{
            height: 200px;
            width: 20%;
            background-color: green;
        }
        .div3{
            height: 50%;
            width: 20%;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

点击pycharm上面浏览器

修改box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
        }
        .div2{
            height: 200px;
            width: 20%;
            background-color: green;
        }
        .div3{
            height: 50px;
            width: 20%;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

点击pycharm上面浏览器

修改box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            border: dashed 2px black;
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
        }
        .div2{
            border: dashed 2px black;
            height: 200px;
            width: 20%;
            background-color: green;
        }
        .div3{
            border: dashed 2px black;
            height: 50px;
            width: 20%;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

点击pycharm上面浏览器

修改box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            border: dashed 2px black;
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
            margin: 10px;
        }
        .div2{
            border: dashed 2px black;
            height: 200px;
            width: 20%;
            background-color: green;
        }
        .div3{
            border: dashed 2px black;
            height: 50px;
            width: 20%;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

点击pycharm上面浏览器

修改box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            border: dashed 2px black;
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
        }
        .div2{
            border: dashed 2px black;
            height: 200px;
            width: 20%;
            background-color: green;
            margin: 10px;
        }
        .div3{
            border: dashed 2px black;
            height: 50px;
            width: 20%;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

点击pycharm上面浏览器

 

修改box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        boby{
            border: solid green 3px;
        }
        .div1{
            border: dashed 2px black;
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
        }
        .div2{
            border: dashed 2px black;
            height: 200px;
            width: 20%;
            background-color: green;
            margin: 10px;
        }
        .div3{
            border: dashed 2px black;
            height: 50px;
            width: 20%;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

点击pycharm上面浏览器

修改box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        boby{
            margin: 0px;
            border: solid green 3px;
        }
        .div1{
            border: dashed 2px black;
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
        }
        .div2{
            border: dashed 2px black;
            height: 200px;
            width: 20%;
            background-color: green;
            margin: 10px;
        }
        .div3{
            border: dashed 2px black;
            height: 50px;
            width: 20%;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

点击pycharm上面浏览器

修改box_model.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        boby{
            margin: -5px;
            border: solid green 3px;
        }
        .div1{
            border: dashed 2px black;
            height: 200px;
            width: 30%;
            background-color: rebeccapurple;
        }
        .div2{
            border: dashed 2px black;
            height: 200px;
            width: 20%;
            background-color: green;
            margin: 10px;
        }
        .div3{
            border: dashed 2px black;
            height: 50px;
            width: 20%;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

</body>
</html>

用pycharm新建margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            /*border: 1px solid green;*/
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">111
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            /*margin: 100px;*/
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
            padding: 100px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            /*margin: 100px;*/
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
            padding-left: 100px;
            padding-top: 100px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            /*margin: 100px;*/
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
            padding: 200px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            /*margin: 100px;*/
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
            padding: 100px -100px -100px 100px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            /*margin: 100px;*/
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
            padding-top: 100px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            /*margin: 100px;*/
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器

 

 

修改margin_padding.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            border: 1px solid green;
            padding: 200px 0px 0px 200px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            /*margin: 100px;*/
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
       </div>
</body>
</html>

点击pycharm上面浏览器