text-indent仅作用于首行，无法实现两端缩进；两端缩进应使用padding-left和padding-right，配合box-sizing: border-box和em单位确保响应式与排版一致性。
text-indent 只管首行，两端缩进得靠 padding-left 和 padding-right 配合使用——但必须清楚：这不是“段落缩进”，而是“容器内边距”，语义和行为完全不同。
为什么不能只用 text-indent 实现两端缩进
text-indent 仅作用于块级元素的**第一行开头**，对末行、行尾、右边界完全无效。试图用负值+大正 text-indent 模拟两端效果，会导致文字溢出、换行错乱、text-align: justify 失效，且在小屏下极易破坏可读性。
- 它不改变元素自身的盒模型尺寸，只偏移首行文字起点
- 右端无对应 CSS 属性（
text-outdent不存在） - 浏览器不支持“末行缩进”或“行尾对齐偏移”这类原生控制
padding 是最直接、最可控的两端缩进方案
给 p 元素设置左右内边距，相当于把整段文字“框”在更窄的可用宽度里，视觉上就是两端同时缩进。关键点在于：必须确保父容器有足够宽度容纳缩进后的文本，否则会触发意外换行或水平滚动。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐写法：
p { padding-left: 2em; padding-right: 2em; } - 单位优先用
em：缩进随字号变化，保持中文排版比例（如 16px 字号下 2em ≈ 32px，约两个汉字） - 避免混用
margin：它会把整个p推离上下文流，影响段间距计算；而padding在盒内部，不影响相邻元素布局 - 若需响应式缩进，用媒体查询微调：
@media (max-width: 480px) { p { padding-left: 1.2em; padding-right: 1.2em; } }
需要保留首行缩进时，text-indent 和 padding 可共存
常见需求是：段落整体向内收（两端缩进），同时首行再额外缩进两字符（模拟传统中文排版）。这时两者不冲突，但要注意顺序和单位一致性。
- 示例：
p { padding-left: 2em; padding-right: 2em; text-indent: 2em; } - 效果：左边界 =
padding-left+text-indent= 4em；右边界 =padding-right= 2em；中间行左对齐于 2em 处 - 务必检查
box-sizing：默认content-box下，padding会增加总宽度；如需严格控宽，加box-sizing: border-box; - 慎用
%单位做padding：它基于父容器宽度，窄屏下可能缩得太狠（如 5% 在 320px 宽度下仅 16px），不如em稳定
真正容易被忽略的是：两端缩进后，line-height 和 font-size 的相对关系会更敏感——过小的行高会让缩进区域显得拥挤，建议搭配 line-height: 1.6 使用；另外，如果段落里嵌了 inline-block 或 float 元素，padding 可能导致它们错位，此时应改用 margin 包裹子元素而非依赖父级 padding。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
