【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )文章目录
一、内边距不影响盒子模型尺寸的情况
二、内边距影响盒子模型尺寸的情况
一、内边距不影响盒子模型尺寸的情况
----
如果元素没有指定高度 , 为该元素设置 Padding 内边距 , 则不会撑开盒子 ;
下面的代码中 , 父容器是 div , 子容器是 p , p 标签的宽度默认充满父容器 , 如果没有为其设置父容器的宽度 , 为 p 标签设置 内边距 , 不会撑开盒子 ;
代码示例 :
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>内边距不影响盒子模型尺寸的情况</title </p>
</div>
</body>
</html>
展示效果 :
测量模型宽度 :
测量模型高度 :
二、内边距影响盒子模型尺寸的情况
----
如果给 p 标签设置了 具体的尺寸 , 为其设置 Padding 内边距 , 会撑开盒子 ;
代码示例 :
<! 