前端开发_HTML5_CSS部分-内外边距（paddingmargin）内外边距(padding/margin)
1.引⼊
我们在之前的学习中学习了边框，我们发现只要是页⾯的标签元素，都可以实现边框的效果，那么接下来我们来讲解⼀个⽐较重要的知识点，边距，边距分为内边距和外边距，它们和边框⼀起是我们后⾯学习盒⼦模型的重要基础。
2.内外边距理解
为了更好的帮助⼴⼤的学习者理解所讲授的知识点，我们使⽤现实⽣活中的⼀个例⼦来帮助理解border、padding、margin之间的关系。
⼩明⽹购了⼀个杯⼦和⼀个⼿机，然后商家就要开始打包包裹，然后发送给⼩明，那么由于这⼀个杯⼦和⼿机都是已损坏的，商家⾸先使⽤快递盒⼦包装了每⼀个商品，然后由于两个是易碎的东西，就在盒⼦的缝隙之间塞⼊了⼀些填充的物体。那么这⼀个过程border、padding、margin分别指的是什么呢？如下图所⽰:
3.内边距(padding)
(1)、内边距概述：通过上述快递盒⼦的讲解，我们可以把内边距理解成为是边框(border)和内容(content)之间的间隔距离问题。
(2)、内边距相关的属性
1内边距(padding)相关属性
2
3  1.内边距通过指定和边框的上下左右时间的间隔来设置内边距。其属性分别为:
4
5(1)、padding-top：设置上内边距
6
7(2)、padding-bottom：设置下内边距
8
9(3)、padding-left：设置左内边距
10
11(4)、padding-right：设置右内边距
12
13(5)、padding：复合属性，可以指定上述四个⽅向上的属性值
14
15
16  2.使⽤padding复合属性设置上述四个参数值的时候需要遵循以下规则:
17
18(1)、padding:5px;  //如果只设置了⼀个值，表⽰上下左右四个⽅向的边距都是5px
19
20(2)、padding:5px 10px;  //如果设置了两个值，表⽰上下为5px，左右为10px
21
22(3)、padding:5px 10px 15px; //如果设置了三个值，表⽰上5px，左右10px，下15px
23
24(4)、padding:5px 10px 15px 20px; //如果设置了四个值，表⽰上5px，右10px，下15px，左20px 25
26
27注意：填充的值不能够出现负值
(3)、内边距相关代码⽰例以及效果截图
1<style type="text/css">
2  .box1{
3    width: 300px;
4    height: 300px;
5    border: 1px solid green;
6  }
7
8  .box1 .content{
9    padding-left: 150px;
10    padding-top: 150px;
11  }
12</style>
13
14<body>
15  <div class="box1">
16    <img src="images/2.jpg" width="100px" height="100px" class="content">
17  </div>
18</body>
4.外边距(margin)
(1)、外边距概述：通过上述快递盒⼦的讲解，我们可以把外边距理解成为是装⼿机的快递盒⼦和装杯⼦的快递盒⼦之间的距离
(2)、外边距相关的属性
1外边距(margin)相关属性
2
3  1.内边距通过指定和边框的上下左右时间的间隔来设置内边距。其属性分别为:
4
5(1)、margin-top：设置上内边距
6
7(2)、margin-bottom：设置下内边距
8
9(3)、margin-left：设置左内边距
10
11(4)、margin-right：设置右内边距
12
13(5)、margin：复合属性，可以指定上述四个⽅向上的属性值
14
15
16  2.使⽤margin复合属性设置上述四个参数值的时候需要遵循以下规则:
17
18(1)、margin:5px;  //如果只设置了⼀个值，表⽰上下左右四个⽅向的边距都是5px
19
20(2)、margin:5px 10px;  //如果设置了两个值，表⽰上下为5px，左右为10px
21
22(3)、margin:5px 10px 15px; //如果设置了三个值，表⽰上5px，左右10px，下15px
23
24(4)、margin:5px 10px 15px 20px; //如果设置了四个值，表⽰上5px，右10px，下15px，左20px
25
padding是外边距还是内边距
26
27注意：外边距的值允许有负值
(3)、外边距相关代码⽰例以及效果截图
1<style type="text/css">
2  .box1 {
3  border: 1px solid red;
4  width: 100px;
5  height: 100px;
6    }
7
8  .box2 {
9  margin-left: 30px;
10  margin-top: 50px;
11  border: 1px solid green;
12  width: 100px;
13  height: 100px;
14  }
15</style>
16
17<body>
18 <div class="box1">
19杯⼦盒⼦
20 </div>
21
22 <div class="box2">
23⼿机盒⼦
24 </div>
25</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。