何为内边距？
向盒子的内部填充一个边距，填充后盒子里面的内容与盒子的边界会产生响应的距离。需要注意的是：内边距会扩大盒子的尺寸。
padding是一个非常常用的属性，而且非常重要。可是在使用过程中，往往会由于添加了padding属性会导致盒子尺寸的改变，进而搞不清楚最终尺寸，让排版变的困难。
下面我们先看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内边距 padding 精讲 眼见非实</title>
</head>
<style>
div{
width:200px;
height:200px;
background:#f00;
/* 内填充：设置了内填充，那么就要在对应的宽度或高度上减去填充的距离 */
/*padding-top:50px;
padding-left:50px;
padding-right:50px;
padding-bottom:50px;*/
/* padding一个值表示上下左右： */
/*padding:50px;*/
/* padding两个值时：第一个值代表上下，第二个值代表的是左右 */
/*padding:50px 20px;*/
/* 三个值的时，第一个是上，第二个值是左右，第三个值是下 */
/*padding:50px 50px 50px;*/
/* 四个值时，分别代表上，右，下，左四个方向*/
padding:10px 20px 30px 40px;
overflow: hidden;
}
</style>
<body>
<div>
padding是一个非常常用的属性，而且非常重要。可是在使用过程中，往往会由于添加了padding属性会导致盒子尺寸的改变，进而搞不清楚最终尺寸，让排版变的困难。青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲。
</div>
</body>
</html>
显示结果如下：
解释一下：
以上代码中我们设置盒子的宽高都是200像素，然后又使用padding添加了内边距。
padding:10px 20px 30px 40px; 它表示上下内边距分别为10和20，那么盒子的最终高度变成了200+10+20=240像素。左右内边距分别为30和40，所以最终宽度为200+20+40=260像素。
其中，padding值的大小决定着每一个值所控制的内边距位置，在代码中都做了详细注解，padding很重要，请大家认真理解。
另外需要注意下内边距的问题
在以上代码中，我们虽然设置了下内边距，但似乎下内边距并不生效，这是为什么呢？
这是由于我们的设置了固定的高度，如果我们确实需要使用下内边距控制文字和下边界的距离，就需要将height设置为auto。
但是，如果height为auto时，css为了保证显示下内边距，它会随着子元素的高度自动填充下内边距，这让我们控制父盒子的高度变的更加困难。
看代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内边距 padding 精讲 眼见非实</title>
</head>
<style>
div{
width:200px;
height:auto;
background:#f00;
/* 内填充：设置了内填充，那么就要在对应的宽度或高度上减去填充的距离 */
/*padding-top:50px;
padding-left:50px;
padding-right:50px;
padding-bottom:50px;*/
/* padding一个值表示上下左右： */
/*padding:50px;*/
/* padding两个值时：第一个值代表上下，第二个值代表的是左右 */
/*padding:50px 20px;*/
/* 三个值的时，第一个是上，第二个值是左右，第三个值是下 */
/*padding:50px 50px 50px;*/
/* 四个值时，分别代表上，右，下，左四个方向*/
padding:10px 20px 30px 40px;
overflow: hidden;
}
</style>
<body>
<div>
padding是一个非常常用的属性，而且非常重要。可是在使用过程中，往往会由于添加了padding属性会导致盒子尺寸的改变，进而搞不清楚最终尺寸，让排版变的困难。青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲。
</div>
</body>
</html>
可以看到，下内边距确实是有了，可是盒子的高度却变成了290，又增加了30像素，这并不是我们想要的结果。
所以我们这样做，请看如下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内边距 padding 精讲 眼见非实</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
div{
width:200px;
height:200px;
background:#f00;
padding:10px 10px 10px 10px;
}
div p{
height:200px;
overflow: hidden;
}
</style>
<body>
<div>
<p>padding是一个非常常用的属性，而且非常重要。可是在使用过程中，往往会由于添加了padding属性会导致盒子尺寸的改变，进而搞不清楚最终尺寸，让排版变的困难。青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲。</p>
</div>
</body>
</html>
我们将内容放到了div中的p标签内，然后通过控制p标签的高度实现了不改变父盒子的高度而产生下内边距目的。
|
窥视卡
雷达卡
发表于 2023-2-1 08:51:23
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 18:13:24
