优先用margin-left实现整体偏移，padding-left用于内容与边框间留空，text-indent仅限段落首行缩进，现代布局应优先使用gap或justify-content替代margin-left。
用 margin-left 还是 padding-left？先分清你要动的是谁
左边距实际分两种：元素自己往右挪（margin-left），或者内容在盒子里往右缩（padding-left）。选错就白调——比如给 <div> 加了 <code>padding-left，但父容器没设 box-sizing: border-box，宽度就可能撑破布局。
常见错误现象：margin-left 在浮动或绝对定位元素上失效；padding-left 让文字离边框太远，但背景色没跟着缩进。
- 要整体偏移整个块：优先试
margin-left - 要内容和边框之间留空（比如输入框文字不贴边）：用
padding-left - 内联元素（如
<span></span>）对margin-left响应不稳定，改用padding-left或先加display: inline-block
margin-left 为负值时，浏览器到底怎么算？
负边距不是“隐藏”，而是真实位移。它会让元素向左挤出原本位置，可能覆盖左边兄弟元素，也可能把父容器的水平滚动条顶出来。
使用场景：实现经典“圣杯布局”中的中间栏左移、图片文字环绕排版、修正 CSS Grid/Flex 子项默认间隙。
立即学习“前端免费学习笔记（深入）”；
- 负值会破坏文档流自然顺序，调试时打开浏览器开发者工具的“Layout”面板看实际占位
- 配合
position: relative使用更可控，避免影响其他元素定位 - 在 Flex 容器里慎用负
margin-left，某些老版本 Safari 会忽略它
用 text-indent 给段落首行缩进，但别误当左间距用
text-indent 只作用于第一行文本，和盒子模型无关。它不能让整个 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 左移，也不能影响图标、图片等非文本子元素。
容易踩的坑：text-indent 在 display: flex 或 display: grid 的子元素上完全无效；设置成百分比时，基准是当前块的 width，不是父容器。
- 纯文字段落首行缩进（如中文排版）：用
text-indent: 2em - 想让整段带图标一起缩进：得套一层
<div> 再设 <code>margin-left - 响应式中避免写死
px值，改用em或rem，否则小屏下缩进过大 - Flex 容器内均分空白：用
justify-content: space-between或space-around - Grid 中控制列间/行间距离：直接设
gap，别碰子项 margin - 旧项目兼容 IE11？
gap不支持，此时才退回margin-left+:first-child { margin-left: 0 }
现代布局中，margin-left 很可能被 gap 或 justify-content 替代
如果你在 Grid 或 Flex 容器里给子项单独加 margin-left 来对齐，大概率是绕路了。原生布局属性更稳定、语义更清。
比如三列等宽卡片，本该用 grid-template-columns: repeat(3, 1fr) + gap: 16px，而不是每个卡片都写 margin-left: 16px——后者在首项上还得额外清除 margin，还容易在换行时错位。
真正难的不是加几个像素，而是判断这个“左空”属于内容层级、布局层级，还是视觉修饰层级。搞错层级，后面所有调整都在补洞。
