如何给HTML表格添加外边距？MARGIN属性控制容器页面位置-html教程-PHP中文网

标签不支持margin属性，必须用css设置；正确写法是.data-table { margin: 16px; }或（需配合显式width），且margin仅作用于表格整体，不影响内部tr/td。

如何给html表格添加外边距？margin属性控制容器页面位置

margin 不能直接写在 <table> 标签里当属性用，比如 <code><table margin="20px"> 完全无效——浏览器会忽略它。必须通过 CSS 控制。 <h3>给 <code><table> 元素加 <code>margin 的正确写法

表格是块级元素，默认可直接应用 margin。最常用且推荐的方式是用类名配合外部或内部 CSS：

<table class="data-table"> + <code>.data-table { margin: 16px; }
临时调试可用内联样式：<table style="margin: 10px 20px 30px 40px;">（上/右/下/左） <li>若需居中显示：<code><table style="margin: 0 auto;">，但必须显式设置 <code>width（如 width: 80%; 或固定值），否则 auto 不生效
margin 对表格行、单元格不起作用？

这是常见误解。margin 只作用于整个 <table> 元素本身，不影响内部的 <code><tr>、<code><td> 或 <code><th> —— 因为这些不是块级容器，而是表格专有盒模型的一部分。 <ul><li><code><tr> 不支持 <code>margin；想调行间距，得用 border-spacing（配合 border-collapse: separate）或给 <td> 加 <code>padding
<td> 和 <code><th> 支持 <code>padding，但不响应 margin（即使设了也无效）
如果目标是让表格“看起来”行距变大，优先改 padding 或用 line-height 配合 vertical-align

表格外边距塌陷（margin collapse）的典型表现

当 <table> 上方或下方紧邻其他块级元素（如 <code><p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<div>）时，垂直方向的 <code>margin 可能意外合并，导致间距比预期小。

例如：<p style="margin-bottom: 20px;">...</p> <table style="margin-top: 20px;"> → 实际间距只有 20px，不是 40px <li>解决方法：给父容器设 <code>overflow: hidden 或 padding: 1px；或改用 border-top/bottom 隔开；或统一只用一个方向设 margin（比如只设 margin-bottom）
注意：margin: 0 auto 水平居中不会塌陷，但垂直方向的 margin-top/margin-bottom 在相邻块之间仍可能塌陷