【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )

韩曙亮

发布于 2023-03-30 19:44:21

97700

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、内边距

1、概念

内边距是盒子的边框与内容之间的间隔长度 ;

下图中 , 中心 100 x 100 像素的是内容 , 内容外侧 , 边框内侧 , 就是内边距范围 ;

2、内边距设置语法

内边距设置语法 :

padding-left : 设置左内边距 ;
padding-top : 设置上内边距 ;
padding-right : 设置右内边距 ;
padding-bottom : 设置下内边距 ;

3、内边距设置效果

设置内边距效果 : 为盒子模型设置内边距 Padding 后 ,

在盒子内容与盒子边框中间 , 会产生一个内边距 ,
与此同时盒子模型的尺寸会变大 ;

二、内边距代码示例

1、不设置边距的示例

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>内边距测试</title>
	<base target="_blank"/>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			
			/* 设置边框 */
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<div>内边距测试</div>
</body>
</html>

展示效果 :

使用标尺测量盒子模型的宽高都是 200 像素 ;

宽度 200 像素 :

高度 200 像素 :

2、设置边距的示例

为盒子模型设置左边距和上边距 , 代码为 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>内边距测试</title>
	<base target="_blank"/>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			
			/* 设置边框 */
			border: 1px solid blue;
			
			/* 设置左边距 */
			padding-left: 20px;
			
			/* 设置上边距 */
			padding-top: 30px;
		}
	</style>
</head>
<body>
	<div>内边距测试</div>
</body>
</html>

展示效果 :