表格整体外边距必须用margin作用于元素，cellpadding只影响单元格内部留白；单元格内容留白用padding，作用于；注意margin合并及行内元素padding失效问题。

表格整体外边距用 margin，不是 cellpadding

给整个表格加边距，比如让它离页面顶部或左边空出一段距离，必须用 margin，作用在 <table> 元素上。别再用过时的 <code>cellpadding——它只管单元格内部，和表格“离别的元素有多远”完全无关。

常见错误现象：<table cellpadding="10"> 写了却没让表格整体缩进，因为 <code>cellpadding 只影响 <td> 和 <code><th> 里的内容离边框的距离。 <ul> <li> <code>margin 支持所有方向：用 margin-top、margin-left 等单独控制，或简写如 margin: 20px 10px 15px 5px

若表格是块级元素（默认就是），margin: 0 auto 可水平居中

注意：如果表格被包在 <div> 里，而你又给这个 <code><div> 设了 <code>overflow: hidden 或 border，可能意外截断表格的 margin 视觉效果——检查 DevTools 的 Layout 面板看 margin 是否被折叠或隐藏

单元格内容留白必须用 padding，不是 cellspacing

想让“单元格里的文字不贴着边框”，目标是 <td> 和 <code><th> 元素的内容与自身边框之间的空隙，这时只能用 <code>padding。CSS 层面统一设置，比老式 cellspacing（控制单元格之间空隙）更可控、也更符合现代规范。

使用场景：按钮式表格项、带背景色的表头、需要呼吸感的数据行。

• 推荐写法：td, th { padding: 8px 12px; }（上下 8px，左右 12px）
• padding 不接受负值；设成 padding: -5px 会被浏览器静默忽略
• 百分比值（如 padding: 2%）以父容器（即 <table>）的宽度为基准，不是高度——窄屏下可能比预期小，宽屏下突然变大 <li>如果用了 <code>box-sizing: border-box，padding 就不会撑大单元格总宽高；否则默认 content-box 下，width: 100px; padding: 10px 实际占位是 120px

行内单元格（如 里放 ）的 padding 行为很特殊

当 <td> 里嵌套了默认 <code>display: inline 的元素（比如 <span></span>、<strong></strong>），直接给这些子元素设 padding-top 或 padding-bottom，视觉上常“看不出效果”——不是没生效，而是它不推高行高，也不影响相邻单元格位置。

容易踩的坑：以为 span { padding: 5px 10px; } 能拉开文字和上下边框距离，结果发现文字还是紧贴 <td> 边框。 <ul> <li>真正起效的方式：把子元素改成 <code>display: inline-block 或 display: block

更稳妥的做法是直接对 <td> 设 <code>padding，而不是依赖内部行内元素

如果必须保留行内语义，且要垂直留白，优先调 line-height，它比 padding-top 更可靠地撑开单元格高度

相邻表格或表格与其他块元素的间距会合并

两个连续的 <table>，或者一个 <code><table> 紧跟一个 <code><p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，各自设了 margin-bottom: 20px 和 margin-top: 15px，实际垂直间距不是 35px，而是取较大值 20px——这是 margin 合并（collapsing）行为，不是 bug，但极易误判。

性能/兼容性影响：所有现代浏览器都遵循该规范，无法禁用，只能绕过。

• 破除合并最轻量的方法：给父容器（比如包裹它们的 <div>）加 <code>padding-top: 0.1px 或 border-top: 1px solid transparent
• 更现代的解法：用 display: flex 或 display: grid 包裹表格，改用 gap 控制间距，彻底避开 margin 合并
• 别试图用 margin-top 把表格“顶上去”——如果它前面没有兄弟元素，这个 margin 会外溢到 顶部，导致整个页面内容下移
表格边距问题最常卡在「分不清作用对象」：是表格自己离别的东西多远（margin），还是单元格内容离自己的边框多远（padding）。一旦混淆，查半天样式也没用。