元素内边距padding介绍

在网页设计过程中元素的内边距往往是缺少不了的，今天就来简单介绍一下内边距（padding）。

padding为元素的内边距，常常用在盒模型（div）上。

一个盒模型分为上右下左4个方向，同样的内边距（padding）也分为上右下左4个方向，分别为：

padding-top、padding-right、padding-bottom、padding-left

下面通过示例进行解释：

1、首先来看在没有设置padding属性时的基本样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内边距（padding）</title>
		<style>
			.container{
				border: 2px solid pink;
				background: #C71585;
				width:200px;
				height:200px;
			}
			.box{
				border:3px solid blue;
				background:#FFC0CB;
				height:150px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box"></div>
		</div>
	</body>
</html>

运行效果如下图所示：

从上图中我们可以看到外层的container包含了内层的box。我们可以看到内层box是紧紧贴着外层container的。

接下来我们完成一个小问题：

问题：内层box的上边框要离外层container的上边框10px的距离。

解析：我们需要使用padding-top属性来进行设置。代码和效果如下图所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>padding-top</title>
		<style>
			.container{
				border: 2px solid pink;
				background: #C71585;
				width:200px;
				height:200px;
				padding-top:10px;
			}	
			.box{
				border:3px solid blue;
				background:#FFC0CB;
				height:150px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box"></div>
		</div>
	</body>
</html>

                 运行效果：

                从最后的运行效果我们可以看到内层box的上边确实与外层container有了10px的间距，但是外层的container变高了，变高的部分刚好是我们设置的padding-top的大小。

结论：padding会撑大原来元素的总宽高，如果要想确保原来元素的总宽高不变，在设置了padding以后需要相应的调整元素本身width和height的值。

元素（盒模型）总宽 = border-left + border-right + padding-left + padding-right + width

元素（盒模型）总高 = border-top + border-bottom + padding-top + padding-bottom + height

2、padding属性符合：padding。

padding包含四个方向，分别是top、right、bottom、left，我们可以分别定义这四个的值，当然也可以进行合并定义，如下所示：

padding值	top值	right值	bottom值	left值	总结
padding:10px;	10px	10px	10px	10px	4个方向值相同
padding:10px 15px;	10px	15px	10px	15px	第一个值：上下第二个值：左右
padding:10px 5px 20px;	10px	5px	20px	5px	第一个值：上第二个值：左右第三个值：下
padding:10px 5px 15px 20px;	10px	5px	15px	20px	第一个值：上第二个值：右第三个值：下第四个值：左

padding的介绍介绍到此，你会不会被搞晕了呢？动起手来写一写看一看吧。

元素内边距padding介绍

猜你喜欢