前端开发_HTML5_CSS部分-内外边距(padding/margin)

本文主要是介绍前端开发_HTML5_CSS部分-内外边距(padding/margin)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

内外边距(padding/margin)

1.引入

我们在之前的学习中学习了边框，我们发现只要是页面的标签元素，都可以实现边框的效果，那么接下来我们来讲解一个比较重要的知识点，边距，边距分为内边距和外边距，它们和边框一起是我们后面学习盒子模型的重要基础。

2.内外边距理解

为了更好的帮助广大的学习者理解所讲授的知识点，我们使用现实生活中的一个例子来帮助理解border、padding、margin之间的关系。

小明网购了一个杯子和一个手机，然后商家就要开始打包包裹，然后发送给小明，那么由于这一个杯子和手机都是已损坏的，商家首先使用快递盒子包装了每一个商品，然后由于两个是易碎的东西，就在盒子的缝隙之间塞入了一些填充的物体。那么这一个过程border、padding、margin分别指的是什么呢？如下图所示:

3.内边距(padding)

(1)、内边距概述:通过上述快递盒子的讲解，我们可以把内边距理解成为是边框(border)和内容(content)之间的间隔距离问题。

(2)、内边距相关的属性

内边距(padding)相关属性1.内边距通过指定和边框的上下左右时间的间隔来设置内边距。其属性分别为:(1)、padding-top:设置上内边距(2)、padding-bottom:设置下内边距(3)、padding-left:设置左内边距(4)、padding-right:设置右内边距(5)、padding：复合属性，可以指定上述四个方向上的属性值2.使用padding复合属性设置上述四个参数值的时候需要遵循以下规则:(1)、padding:5px;  //如果只设置了一个值，表示上下左右四个方向的边距都是5px(2)、padding:5px 10px;  //如果设置了两个值，表示上下为5px,左右为10px(3)、padding:5px 10px 15px; //如果设置了三个值，表示上5px,左右10px,下15px(4)、padding:5px 10px 15px 20px; //如果设置了四个值，表示上5px,右10px,下15px,左20px注意:填充的值不能够出现负值

(3)、内边距相关代码示例以及效果截图

<style type="text/css">.box1{width: 300px;height: 300px;border: 1px solid green; }.box1 .content{padding-left: 150px;padding-top: 150px;}
</style><body><div class="box1"><img src="images/2.jpg" width="100px" height="100px" class="content"></div>	
</body>

4.外边距(margin)

(1)、外边距概述:通过上述快递盒子的讲解，我们可以把外边距理解成为是装手机的快递盒子和装杯子的快递盒子之间的距离

(2)、外边距相关的属性

外边距(margin)相关属性1.内边距通过指定和边框的上下左右时间的间隔来设置内边距。其属性分别为:(1)、margin-top:设置上内边距(2)、margin-bottom:设置下内边距(3)、margin-left:设置左内边距(4)、margin-right:设置右内边距(5)、margin：复合属性，可以指定上述四个方向上的属性值2.使用margin复合属性设置上述四个参数值的时候需要遵循以下规则:(1)、margin:5px;  //如果只设置了一个值，表示上下左右四个方向的边距都是5px(2)、margin:5px 10px;  //如果设置了两个值，表示上下为5px,左右为10px(3)、margin:5px 10px 15px; //如果设置了三个值，表示上5px,左右10px,下15px(4)、margin:5px 10px 15px 20px; //如果设置了四个值，表示上5px,右10px,下15px,左20px注意:外边距的值允许有负值

(3)、外边距相关代码示例以及效果截图

<style type="text/css">.box1 {			border: 1px solid red;width: 100px;height: 100px;			}.box2 {margin-left: 30px;margin-top: 50px;border: 1px solid green;width: 100px;height: 100px;}
</style><body><div class="box1">杯子盒子</div><div class="box2">手机盒子</div>
</body>