text-align控制内联内容对齐，margin实现块级元素居中，padding调节内容与边框距离，三者结合可精准控制盒模型对齐。
在CSS中，调整盒模型元素的对齐需要理解 text-align、padding 和 margin 各自的作用，并合理结合使用。它们分别控制内容对齐、内边距和外边距，正确搭配才能实现理想的布局效果。
text-align 控制文本及内联元素对齐
text-align 是作用于块级容器上的属性，用来设置其内部的文本或内联元素的水平对齐方式。
常见取值包括：- left：左对齐（默认）
- center：居中对齐
- right：右对齐
它只影响容器内的文本、图片等内联内容，不会让块级元素本身居中。
例如：
立即学习“前端免费学习笔记（深入）”；
div {
text-align: center;
}
span {
background: #ddd;
}
此时 div 中的 span 文本会居中显示，但 span 仍是内联元素，占据宽度由内容决定。
使用 margin 实现块级元素居中对齐
若想让一个块级元素（如 div）在父容器中水平居中，应使用 margin: auto 配合固定宽度。
关键点是设置宽度后，左右 margin 自动分配剩余空间。
示例：
.center-box {
width: 300px;
margin: 0 auto; /* 水平居中 */
background: #eee;
}
这样该 div 会在父容器中居中，前提是父容器有足够宽度。
padding 调整内容与边框的距离
padding 影响元素内部空间，增加 padding 会让内容远离边框，间接影响视觉对齐。
当使用 text-align 居中文本时，若左右 padding 不一致，会导致内容看起来不对称。
建议：
- 保持左右 padding 相等，确保 text-align 效果准确呈现
- 若需偏移内容，优先调整 padding 而非依赖 text-align
例如：
立即学习“前端免费学习笔记（深入）”；
.text-container {
text-align: center;
padding: 20px;
background: #f0f0f0;
}
文字会在容器内居中，且四周留白均匀。
结合使用实现精准对齐
实际开发中常需组合这些属性。比如创建一个居中的卡片，内部文字也居中：
.card {
width: 400px;
margin: 20px auto;
padding: 20px;
background: #fff;
border: 1px solid #ccc;
text-align: center;
}
这个卡片自身居中，内部文字也居中，padding 提供内边距避免内容贴边。
基本上就这些。掌握 text-align 对内联内容的影响，margin 对块级元素的定位作用，以及 padding 对内部空间的调节，就能灵活控制盒模型中的对齐效果。
