范仁义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

 

 

1、盒子模型


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


 

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;

 

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

 

 



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>