padding和margin不直接控制对齐，而是通过改变内外空间间接影响视觉位置；真正决定对齐的是盒模型四部分共同构成的尺寸与定位基准。
padding 和 margin 对文字/图片对齐的实际影响
它们不直接控制对齐，而是通过改变元素内部空间（padding）或外部间距（margin）间接影响视觉位置。真正决定“对齐”效果的，是盒模型中内容区（content）、内边距（padding）、边框（border）和外边距（margin）四者共同构成的尺寸与定位基准。
文字在块级容器中“居中对齐”的常见误操作
很多人试图用 padding 把文字“顶”到中间，比如给 <div>文本</div> 加 padding: 50px 0;，结果发现上下留白不对称、响应式下失效、或者和相邻元素间距混乱。
-
padding是相对于 content box 的，若容器高度固定且未设置box-sizing: border-box，实际高度 = content + padding + border，容易撑出滚动条或破坏布局 - 纯靠
padding模拟垂直居中，在字体大小变化、行高不一致、多行文本场景下极易错位 - 更可靠的方式是：容器设
display: flex+align-items: center，或文本容器设line-height等于容器高度（仅限单行）
图片在行内上下对齐异常的根源与修复
默认情况下，<img alt="css盒模型如何控制文字和图片的对齐_通过padding和margin调整对齐方式" > 是 inline 元素，基线（baseline）对齐文字底部，导致图片下方常有一段“看不见的间隙”。这不是 margin 或 padding 的问题，而是 vertical-align 的默认行为。
- 直接加
margin-bottom: -4px可临时遮盖间隙，但数值依赖字体大小，不可靠 - 正确做法是改
vertical-align：如vertical-align: middle、vertical-align: top，或设display: block让图片脱离行内流 - 若用
padding包裹图片想“居中”，注意padding作用于图片自身盒，不是其父容器；要让图片在父容器中居中，应控制父容器的text-align: center（水平）或display: flex（水平+垂直）
用 margin 调整图文相对位置时的典型陷阱
margin 的合并（collapsing）会让预期失效，尤其在相邻块级元素之间。例如两个段落间想用 margin-bottom 和 margin-top 控制间距，结果只生效较大值。
立即学习“前端免费学习笔记（深入）”；
- 父子元素间也会发生外边距合并：子元素的
margin-top可能“穿透”父容器顶部，表现为父容器没上边距但子元素却顶到了最上面 - 解决方法包括：给父容器设置
border-top: 1px solid transparent、padding-top: 1px，或触发 BFC（如overflow: hidden） - 对图片加
margin后发现换行或浮动异常？检查是否遗漏了display: inline-block或float上下文——margin对inline元素的左右有效，上下无效
