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

最新推荐文章于 2024-07-26 19:29:32 发布

魔笛手7

最新推荐文章于 2024-07-26 19:29:32 发布

阅读量5.9k

点赞数 1

分类专栏：前端文章标签： css html5 html Margin padding

本文链接：https://blog.csdn.net/u013185175/article/details/121950588

版权

前端专栏收录该内容

75 篇文章 8 订阅

订阅专栏

内外边距(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>

魔笛手7

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端开发_HTML5_CSS部分-内外边距(padding/margin)

内外边距(padding/margin)1.引入我们在之前的学习中学习了边框，我们发现只要是页面的标签元素，都可以实现边框的效果，那么接下来我们来讲解一个比较重要的知识点，边距，边距分为内边距和外边距，它们和边框一起是我们后面学习盒子模型的重要基础。2.内外边距理解为了更好的帮助广大的学习者理解所讲授的知识点，我们使用现实生活中的一个例子来帮助理解border、padding、margin之间的关系。小明网购了一个杯子和一个手机，然后商家就要开始打包包裹，然后发送给小明...
复制链接

扫一扫