margin四边顺序为上右下左（顺时针），缩写支持1~4值：1值全同，2值为上下/左右，3值为上/左右/下，4值即顺时针；负值可行但易致重叠或裁剪；垂直外边距会合并；行内元素不响应上下margin；margin:auto居中需块级+定宽；box-sizing:border-box使width包含padding和border，margin始终在外。
margin 属性的四个方向写法怎么配？
直接用 margin 一次性设四边，顺序是上右下左（顺时针），比如 margin: 10px 20px 15px 5px。更常用的是缩写形式：margin: 10px 20px 表示上下 10px、左右 20px；margin: 10px 则四边都是 10px。
单独控制某一边，就用 margin-top、margin-right、margin-bottom、margin-left。注意：这些值可以为负数，但负外边距会引发重叠或布局偏移，调试时容易误判。
为什么设置了 margin 却没生效？
常见原因有三个：
- 父容器设置了
overflow: hidden或auto，且子元素用了负margin，可能被裁剪 - 相邻块级元素的垂直
margin会发生合并（collapsing），比如两个<p></p>各设margin-bottom: 20px和margin-top: 15px，实际间距只有 20px，不是 35px - 行内元素（如
<span></span>）对margin-top/margin-bottom不响应，只认左右
margin: auto 在什么情况下能居中？
margin: auto 实现居中，需要同时满足两个条件：元素必须是块级（或设了 display: block），且宽度不能是 auto（即要有明确的 width 值）。此时 margin: 0 auto 才能让元素水平居中。
立即学习“前端免费学习笔记（深入）”；
它对 flex 或 grid 子项无效——那些场景该用 justify-content 或 place-items；也不适用于绝对定位元素，除非配合 left/right 显式设值。
和 padding、border 混用时要注意什么？
CSS 盒模型默认是 content-box，这意味着你写的 width: 200px 只算内容区，加上 padding 和 border 后总宽会超。如果还加了 margin，整个占用空间就是：内容宽 + 左右 padding + 左右 border + 左右 margin。
想避免意外溢出，建议在全局重置时加上：* { box-sizing: border-box; }。这样 width 就包含 padding 和 border，但 margin 始终在外，不受影响。
真正容易被忽略的是：margin 不触发重排（reflow）但会影响文档流位置；而 padding 和 border 改变的是元素自身尺寸，可能间接影响周围布局。改 margin 前，先确认它是不是当前最轻量的调整方式。
