CSS的margin属性必须通过CSS控制才生效，HTML中margin="10"无效；三种写法：行内样式、内部样式表、外部CSS文件；注意元素默认margin、四值简写顺序（上右下左）、外边距折叠及display类型影响。
直接用 CSS 的 margin 属性，别在 HTML 标签里写 margin="10" —— 浏览器根本不认这个属性，纯属无效。
怎么写 margin 才生效
必须通过 CSS 控制，有三种常用方式：
- 行内样式：
<div style="margin: 16px;">内容</div> - 内部样式表：
<style>.card { margin: 12px 0; }</style> - 外部 CSS 文件：
.card { margin: 12px 0; }，再通过class="card"应用
注意：HTML 元素默认可能自带 margin（比如 <p> 有 margin-bottom），不重置的话容易和你写的叠加或冲突。
margin 四值简写顺序容易搞反
margin: 10px 20px 30px 40px; 对应的是上 → 右 → 下 → 左，顺时针，不是“上下左右”直觉顺序。
立即学习“前端免费学习笔记（深入）”；
常见误写成 margin: 10px 30px 20px 40px;（把下和右颠倒），结果底部间距不对却查半天。
实用技巧：
-
margin: 10px 20px;→ 上下 10px，左右 20px -
margin: 0 auto;→ 水平居中（需配合width） -
margin-top: -8px;→ 负值允许，能微调重叠，但慎用，易破坏流式布局
表格 <table> 加 margin 为什么没反应
其实它能反应——<table> 默认是块级元素，margin 完全有效。出问题通常因为：
- 写了
<table margin="10">→ HTML 属性无效，必须走 CSS - 表格紧挨着
<p>或<div>，发生外边距塌陷（collapsing margins）→ 两个相邻块级元素的垂直 margin 会取最大值，不是相加 - 想调单元格间距却误用了
margin→ 表格内部空隙靠border-spacing或paddingon<td>，不是<table>的margin
为什么加了 margin 页面没变化
最常被忽略的是 display 类型和父容器限制：
- 行内元素（如
<span>、<a>）只响应margin-left/margin-right，margin-top/margin-bottom无效 - 父容器设置了
overflow: hidden或flex布局，可能截断或压缩 margin 区域 - 元素被设为
position: absolute后，margin仍生效，但作用对象变成定位上下文，不是文档流中的邻居 - 检查 computed styles（浏览器开发者工具），确认
margin确实被应用且未被其他规则覆盖（比如!important或更高优先级选择器）
外边距塌陷和 display 类型是真正在现场卡住人的两个点，改完 margin 看不到效果时，先开 devtools 瞅一眼 computed tab，比猜快得多。
