内边距（padding）会撑开元素，根本原因在于CSS默认采用标准盒模型（content-box），此时width/height仅控制内容区尺寸，padding位于内容与边框之间并额外增加盒子总尺寸。
内边距（padding）会撑开元素，根本原因在于 CSS 默认采用的是 标准盒模型（content-box）。在这个模型下，width 和 height 属性只控制内容区（content）的尺寸，而 padding 是额外加在内容区“外面”、边框“里面”的一层空间——它不被包含在设置的宽高内，自然就会把整个盒子向外推。
从内到外，盒子结构是：content → padding → border → margin。padding 位于内容与边框之间，是透明的、可继承背景色的区域。它的存在意味着：
因为 width/height 的语义就是“内容区域的大小”，不是“整个盒子的大小”。比如：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid #000;
}这个盒子实际占用的水平空间是：200px（内容）+ 40px（左右 padding）+ 4px（左右 border）= 244px。若父容器只有 200px 宽，它就会溢出。
立即学习“前端免费学习笔记（深入）”；
想让 padding “向内压缩”而不是“向外撑开”，只需启用 IE 曾经的怪异模型（现为标准支持）：
box-sizing: border-box; —— 此时 width 和 height 表示的是“内容 + padding + border”的总尺寸* { box-sizing: border-box; }，大幅降低尺寸计算负担对 span、a 这类行内元素：
display: inline-block 或 block
以上就是css内边距为什么会撑开元素_通过盒模型原理解释padding行为的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
747
收藏
