为了调整内容在盒子中的显示位置,常常需要给元素设置内边距。内边距也叫做内填充,指的是元素内容与边框之间的距离。在CSS中padding属性用于设置内边距,同边框属性border一样,内边距属性padding也是复合属性。
1、未设置内边距属性的div盒子效果图如下图所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距属性</title>
<style>
div {
width: 200px;
height: 200px;
border: 5px solid pink;
}
</style>
</head>
<body>
<div>
未设置内边距属性的效果
</div>
<hr>
<div id="one">
设置内边距属性的效果
</div>
</body>
</html>
2、设置左内边距属性的div盒子效果图如下图所示:
图中显示的绿色部分即为设置的左内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距属性</title>
<style>
div {
width: 200px;
height: 200px;
border: 5px solid pink
}
#one {
padding-left: 20px;
}
</style>
</head>
<body>
<div>
未设置内边距属性的效果
</div>
<hr>
<div id="one">
设置内边距属性的效果
</div>
</body>
</html>
3、设置完内边距属性的效果图如下图所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距属性</title>
<style>
div {
width: 200px;
height: 200px;
border: 5px solid pink;
}
#one {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 20px;
}
</style>
</head>
<body>
<div>
未设置内边距属性的效果
</div>
<hr>
<div id="one">
设置内边距属性的效果
</div>
</body>
</html>
padding相关属性的取值可为auto自动(默认值)、不同单位的数值、相对于父元素(或浏览器)的宽度百分比。在实际工作中padding属性值最常用的单位是像素值px,并且不允许使用负值。
同边框相关属性一样,使用复合属性padding定义内边距时,必须按照顺时针顺序采用值复制的原则,1个值为四边,2个值为上下/左右,3个值为上/左右/下。
4、内边距综合设置效果图如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内边距属性</title>
<style>
div {
width: 200px;
height: 200px;
border: 5px solid pink;
}
/* 内边距综合设置 */
#one {
padding: 20px 30px 20px;
}
</style>
</head>
<body>
<div>
未设置内边距属性的效果
</div>
<hr>
<div id="one">
设置内边距属性的效果
</div>
</body>
</html>