html内边距必须用css的padding属性设置，不可用html标签的padding或cellpadding等过时属性；支持四值语法、单边属性及百分比（相对包含块宽度）。
html内边距用哪个CSS属性
HTML元素的内边距（padding）必须用CSS的 padding 属性设置，HTML标签本身没有原生内边距属性。别试图在 <div> 或 <code><p></p> 里加 padding="10" 这类写法——浏览器直接忽略。
常见错误现象：写成 <div padding="20"> 或 <code><table cellpadding="5"> 后发现没效果，其实是混淆了过时的HTML属性和现代CSS规则。
<ul><li>
<code>cellpadding 是旧版 <table> 的HTML属性，仅对表格单元格生效，且不推荐在新项目中使用
<li>所有现代布局都应统一用 <code>padding CSS属性，支持所有块级、行内元素（需 display: inline-block 等配合）
padding 不接受负值，设负数会被浏览器静默丢弃padding四个方向怎么分别控制
用 padding 的四值语法最常用：padding: 上 右 下 左;，顺序固定，顺时针。漏掉某个值会自动回退到对边或上边的值，容易出错。
使用场景：给按钮加不等量内边距、卡片顶部留白多于底部、表单输入框左右紧凑但上下宽松。
立即学习“前端免费学习笔记（深入）”；
-
padding: 10px 16px 8px 16px;—— 上10、右16、下8、左16 -
padding: 12px 20px;—— 上下12、左右20（两值：上/下、左/右） -
padding: 8px;—— 四边都是8px（单值） - 单独设某一边：用
padding-top、padding-right、padding-bottom、padding-left
inline元素设padding为什么看起来没反应
行内元素（如 <span></span>、<a></a>）可以设 padding，但垂直方向（padding-top/padding-bottom）不会撑开行高，视觉上像“没生效”，其实它影响了背景和点击热区，只是不推挤其他行内内容。
性能 / 兼容性影响：这个行为是CSS规范定义的，所有浏览器一致，不是bug。想让垂直padding真正撑开空间，得改 display 类型。
- 保持行内流但需要真实高度？加
display: inline-block; - 要完全自由控制？用
display: inline-flex;或display: block; - 别用
line-height伪装 padding——那只是文字垂直居中，背景色和点击区域仍不对
padding设百分比是相对谁计算的
padding 的百分比值永远相对于**包含块（containing block）的宽度**，不是父元素高度，也不是自身宽高。这点和 margin 一样，但和 height、top 等属性不同。
容易踩的坑：给一个高度固定、宽度自适应的容器设 padding: 5%;，结果在窄屏下padding小、宽屏下突然变大，而高度毫无变化——因为算的是父容器宽度，不是它自己的高度。
- 响应式设计中慎用百分比 padding 做“等比留白”，尤其在竖排布局里
- 如果真要按高度算，得用
padding-top: calc(5vh);或 JS 动态计算 - Flex/Grid 容器内部子项的
padding百分比，依然按其**包含块宽度**算，不是 flex 容器宽或 grid 区域宽
