元素margin无反应的主因是父容器未触发BFC或发生margin collapse；解决需创建BFC、用padding替代、注意行内元素限制及margin:0 auto的width和display前提。
margin 设置外边距时为什么元素没反应？
常见原因是父容器未触发
，或子元素发生了
（外边距合并）。比如两个相邻块级元素的垂直
会取较大值，而不是相加；父元素和第一个/最后一个子元素之间也可能发生合并。
解决办法：
给父容器设置
、
或
来创建新
用
替代部分
，避开合并场景
对行内元素或
元素，
水平方向有效，垂直方向不生效（除非改变
或父容器
）
margin: 0 auto; 居中失效的几种典型情况
只对设置了明确
的块级元素生效，且要求其
值为
（或
等可居中类型）。
失效原因包括：
立即学习
“
前端免费学习笔记（深入）
”；
元素是
或
—— 需加
未设置
（或设为
），宽度撑满父容器 —— 必须指定具体数值或
父容器
被误认为能居中块元素 —— 它只影响行内内容
使用了
或
—— 这些会让元素脱离文档流，
失去计算基准
margin 负值的实际用途和风险
负
不只是“拉回来”那么简单，它常用于布局微调和视觉重叠，但容易引发意料外的流式破坏。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
典型用法：
实现卡片横向无缝拼接（配合
补偿）
子元素设
让标题与上文视觉对齐（避免空隙）
在栅格系统中抵消父容器的
，让子项真正贴边
风险点：
负
不会触发父容器重绘高度，可能导致内容被裁剪或遮挡
与
混用时，渲染顺序和层叠上下文可能出错
在响应式断点中若未重置负值，小屏下容易导致内容溢出
margin 和 padding 在盒模型中的位置关系
从外到内：
→ 边框（
）→
→ 内容区（
）。其中
是透明的，不占背景色；
会继承父元素背景，且影响元素总尺寸（在
下）。
关键区别：
不能为百分比值设置
（历史限制，仅
支持，且按父容器宽度计算）
支持
，
不支持
合并只发生在块级流中；
永远不会合并
用
后，
包含
和
，但依然不包含
外边距的本质是控制元素与其他元素之间的“呼吸空间”，不是定位工具。真要精确控制位置，
、
或
才是更可靠的选择。
BFCmargin collapsemarginoverflow: hiddendisplay: flow-rootfloat: leftBFCpaddingmargindisplay: inline-blockmarginvertical-alignline-heightmargin: 0 autowidthdisplayblocktableinlineinline-blockdisplay: blockwidthauto%text-align: centerfloatposition: absolutemargin: automarginmargin-left: -20pxpaddingmargin-top: -1empaddingmargintransform: translateY()marginborderpaddingcontentmarginpaddingbox-sizing: content-boxmargintop/bottomleft/rightmarginautopaddingmarginpaddingbox-sizing: border-boxwidthpaddingbordermarginpositiontransformflex/grid