范仁义css3课程---11、外边距margin

一、总结

一句话总结：

margin的作用是设置外边距，也就是设置不同盒子之间的距离，用法的话和内边距(padding)非常相似，有上下左右，也有简写属性。margin也非常常用。

1、margin使用实例？

比如设置4个外边距都是25px：margin:25px;

2、margin使用注意？

a、外边距可以设置负值

b、margin 没有背景颜色，是完全透明的。

3、如何使用margin设置块级元素水平居中？

margin-left和margin-right设置为auto，可以设置元素水平居中：例如 margin: 0 auto;

二、外边距margin

博客对应课程的视频位置：11、外边距margin
https://fanrenyi.com/video/10/41

1、盒子模型

2、外边距margin

CSS margin(外边距)属性定义元素的外边距。

注意：

设置了外边距就是扩大了元素的占位面积

外边距是和其它盒子的距离

3、四个方向的外边距

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

注意：

左上相当于改自己，右下相当于挤别人

4、外边距的简写

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

5、注意

a、外边距可以设置负值

b、margin 没有背景颜色，是完全透明的。

6、小技巧

margin-left和margin-right设置为auto，可以设置元素水平居中

可以用 margin: 0 auto;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .box1{
 8             width: 100px;
 9             height: 100px;
10             border: 1px solid red;
11             margin: 0 auto;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="box1">
17 
18     </div>
19 </body>
20 </html>

三、课程代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>外边距margin</title>
 6     <style>
 7         .box1{
 8            width: 200px;
 9             height: 200px;
10             border: 1px solid red;
11             /*margin: 25px;*/
12             /*margin-left: 10px;*/
13             /*margin-top: 20px;*/
14             /*margin-bottom: 25px;*/
15             /*margin: 25px 35px;*/
16             /*margin-left: -25px;*/
17             /*margin-top: -50px;*/
18             /*margin-left: auto;*/
19             /*margin-right: auto;*/
20             margin: 0 auto;
21         }
22         .box2{
23             width: 100px;
24             height: 100px;
25             border: 1px solid green;
26         }
27     </style>
28 </head>
29 <body>
30 <div class="box1">
31 
32 </div>
33 <div class="box2">
34 
35 </div>
36 </body>
37 </html>

参考：

菜鸟学院：css、css3手册：https://www.runoob.com/css/css-tutorial.html