默认 box-sizing 下 padding 会增大元素宽高，如 width:200px;height:100px;padding:20px 时实际为 240×140px；box-sizing:border-box 可使宽高包含 padding，内容区自动压缩，推荐全局设置 *{box-sizing:border-box}。
padding 会撑大元素的 width 和 height（默认 box-sizing）
除非显式设置 box-sizing: border-box，否则 padding 会直接加到元素的 width 和 height 上，导致实际占用空间变大。
比如：div { width: 200px; height: 100px; padding: 20px; }，这个 div 实际宽高是 240px × 140px（左右各 +20px，上下各 +20px）。
- 内容区仍是 200×100，但 padding 把它“包”在中间，整体盒子向外扩展
- 如果父容器宽度固定为 200px，这个
div就会溢出或触发换行（对 inline 元素尤其明显） -
padding不影响其他元素的位置（不像margin那样推走邻居），但它让自身“变胖”，可能挤占布局空间
box-sizing: border-box 能避免尺寸失控
把 box-sizing 设为 border-box 后，width 和 height 指的是「包括 padding 和 border 的总尺寸」，padding 就不再往外撑了。
等效写法：div { width: 200px; height: 100px; padding: 20px; box-sizing: border-box; } → 内容区自动压缩为 160×60，总宽高仍为 200×100。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 这是现代 CSS 布局的常见做法，很多重置样式（如 Normalize.css）或框架（Bootstrap）默认启用
- 全局设置推荐：
* { box-sizing: border-box; }，但注意<input>、<textarea></textarea>等表单控件在某些浏览器中可能有兼容性微差 - 不要只在局部加
box-sizing，否则混合使用时容易误判尺寸
padding 对 display 类型敏感，尤其影响 inline 元素
padding 对 display: inline 元素的垂直方向（padding-top/padding-bottom）不改变行高，但会“视觉上溢出”，且可能破坏基线对齐。
例如：<span style="padding: 20px; background: red;">文字</span>，上下 padding 会覆盖邻近行内容，但不会抬高整行。
- 解决办法：改用
display: inline-block或display: inline-flex，它们能正常响应所有方向的padding - 表格单元格（
td、th）默认支持完整 padding，无需额外处理 - 按钮（
button）、输入框（input[type="button"]）本质是替换元素，padding 表现稳定，可放心使用
padding 为 0 时也可能有“隐形”尺寸影响
即使没写 padding，某些元素自带用户代理样式（user agent stylesheet），比如 button 默认有 padding，h1~h6 有 margin 但无 padding，而 ul、ol 的 li 可能因 list-style 产生视觉偏移。
- 排查方式：用浏览器开发者工具检查 computed 样式，看
padding是否被继承或重置 - 重置建议：对需要精确控制的组件，显式写
padding: 0，而不是依赖初始值 - 注意：
padding: 0和未声明padding在层叠中行为一致，但前者更明确、更易维护
实际布局中，padding 的尺寸影响常被低估——它不推别人，只悄悄把自己变大；而一旦和 max-width、flex 容器或响应式断点叠加，就容易出现意料之外的换行或截断。动手前先确认 box-sizing，再查 computed padding 值，比事后调 margin 更省力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
