文章目录
- 一、内边距不影响盒子模型尺寸的情况
- 二、内边距影响盒子模型尺寸的情况
一、内边距不影响盒子模型尺寸的情况
如果元素没有指定高度 , 为该元素设置 Padding 内边距 , 则不会撑开盒子 ;
下面的代码中 , 父容器是 div , 子容器是 p , p 标签的宽度默认充满父容器 , 如果没有为其设置父容器的宽度 , 为 p 标签设置 内边距 , 不会撑开盒子 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>内边距不影响盒子模型尺寸的情况</title>
<base target="_blank"/>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
}
p {
/* 没有指定宽度, 宽度默认填充父容器
此时为其指定内边距, 不会撑开盒子*/
background-color: yellow;
padding-left: 50px;
}
</style>
</head>
<body>
<div>
<p>内边距不影响盒子模型尺寸的情况</p>
</div>
</body>
</html>展示效果 :
测量模型宽度 :
测量模型高度 :
二、内边距影响盒子模型尺寸的情况
如果给 p 标签设置了 具体的尺寸 , 为其设置 Padding 内边距 , 会撑开盒子 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>内边距不影响盒子模型尺寸的情况</title>
<base target="_blank"/>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
}
p {
/* 没有指定宽度, 宽度默认填充父容器
此时为其指定内边距, 不会撑开盒子*/
/* 如果指定了宽度, 为其指定内边距,
会撑开盒子*/
width: 200px;
height: 100px;
background-color: yellow;
padding-left: 50px;
}
</style>
</head>
<body>
<div>
<p>内边距不影响盒子模型尺寸的情况</p>
</div>
</body>
</html>显示效果 :
测量宽度 : p 标签 内容宽度 200 像素 , 设置左内边距 , 水平方向上撑开了 50 像素 , 最终盒子宽度为 250 像素 ;
测量高度 : 没有设置 垂直方向 上的内边距 , 没有撑开效果 ;
