margin-bottom是设置元素底部外边距的css属性，属盒模型范畴，默认值为0，支持auto、长度值、百分比及inherit，允许负值，内联元素需转块级才生效，垂直相邻块级元素间会发生外边距折叠。

margin-bottom 是最直接有效的办法，别绕弯子。

给 <table> 加 <code>margin-bottom

表格是块级元素，默认会独占一行，margin-bottom 能让它和下方的 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 之间产生真实物理距离：

• 写在内联样式里：<table style="margin-bottom: 24px;"> <li>写在 CSS 中：<code>table { margin-bottom: 1.5rem; }（推荐用 rem 或 em，兼顾缩放和可访问性）
• 只影响它自己，不会波及表格内部单元格或相邻其他表格
• 注意：不要给 <tr> 或 <code><td> 设 <code>margin——无效，浏览器会忽略

  为什么不用 padding 或 line-height

  常见误操作：

  • table { padding-bottom: 24px; } —— 表格元素不支持 padding 作为外边距使用，这个值不会推远下方段落
  • p { margin-top: 24px; } —— 看似可行，但容易触发外边距合并（margin collapse），尤其当上方还有其他块级元素时，实际间距可能小于预期
  • line-height 或 height —— 它们控制的是内容行高或容器高度，不是两个独立块之间的间隙，强行用会撑开表格自身，导致布局错位

  多个表格连续排列时的间距控制

  如果页面中有多个 <table> 连续出现，想统一控制它们之间的空隙： <ul> <li>用通用选择器：<code>table:not(:last-of-type) { margin-bottom: 32px; }

• 或者包裹一层容器，用 gap（仅限现代浏览器）：.tables-wrapper { display: flex; flex-direction: column; gap: 32px; }
• 避免对每个 <table> 单独加类再写样式——冗余且难维护 <p>真正容易被忽略的是：表格默认没有 <code>margin，所以下方段落会紧贴着它；而你写的 margin-bottom 如果没生效，大概率是被某处全局重置样式（比如 Normalize.css 或 UI 框架）覆盖了，调试时先看 DevTools 的 Computed 面板里 margin-bottom 的最终计算值，而不是只盯源码。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！