间距贴边与层叠遮挡
在网页排版中，文字贴边、内容截断和浮层被遮挡是常见的布局问题。理解盒模型、内边距、溢出机制和层叠层级，可以帮助我们向 AI 准确定位并修正这些问题。
盒模型与内边距（Padding）
如果卡片中的标题和正文紧贴着四周边缘，视觉上会显得拥挤。
在网页中，每个元素都被一个矩形盒模型包裹，AI 回复里常提到的概念即来自（Box Model）。盒模型由内向外依次分为：
- 内容（Content）：文本或图片等核心要素；
- 内边距（）：内容与边框之间的空白距离；
- 边框（Border）：容器四周的线条轮廓；
- 外边距（Margin）：当前容器与其他相邻元素之间的距离。
文字贴边说明缺少内边距（Padding）。为卡片设置统一的内边距，文字就能与卡片边缘保持合适的距离。
- 对 AI 这样说：“卡片里的文字紧贴着四周边缘，太挤了。请为卡片统一设置 24px 的内边距（padding），并确保使用 border-box 盒模型，避免内边距把卡片宽度额外撑大。”
整理背景把项目素材归类成背景、过程和结果。
对 AI 说：卡片里的文字贴边了，周围留一点空隙
整理背景把项目素材归类成背景、过程和结果。
这块空隙叫内边距 PaddingAI 回复里的「内边距」说的就是这块空隙；「盒模型」是它连着边框、间距一起计算的规则，我们不用管怎么算。
内边距与外间距的区别
向 AI 描述间距时，需要区分内部与外部属性：
- 内部间距：文字到卡片边框的距离，称为（Padding）。
- 外部间距：两张卡片互相之间的距离，称为外边距（Margin）或网格间隙（Gap）。
排版通常遵循“组内紧凑、组间清晰”的原则。同组的功能卡片之间保持适度间距，而不同的大区块之间则需要留出更大的垂直间距。
- 对 AI 这样说：“三张同组卡片之间设置 16px 的间距（gap）；而能力卡片区和下方的案例区之间，留出 64px 的大区块垂直间距，让内容节奏更清晰。”
Padding 内边距卡片里面
- 文字到卡片边缘的空隙
- 会让卡片的背景变大
- 说「里面留点空隙」
区块间距卡片之间
- 两张卡片之间的空隙
- 同级卡片用同一档
- 说「卡片挤在一起了」
内容溢出与容器自适应
当卡片中的文本较长时，如果容器高度被固定，超出的文字可能会被截断或只显示一部分，这种现象称为（Overflow）。
如果只是笼统地说“文字超出了”，AI 可能会直接设置 overflow: hidden 截断文字，或者给卡片内部加上局部滚动条。
通常的做法是让卡片高度随内容自适应撑高，允许文字自然折行，保证全部文字正常展示。
- 对 AI 这样说：“卡片里的长标题请允许自然换行，卡片高度随内容自适应撑高。不要使用 overflow: hidden 截断文字，也不要在卡片内部出现滚动条。”
层叠上下文与层级（z-index）
导航菜单展开时，下拉浮层有时会被下方的横幅或图片遮挡。这通常涉及（z-index）。
如果直接提高 z-index 依然无效，通常是因为包裹导航栏的外层容器设置了 overflow: hidden，导致超出容器范围的下拉浮层被直接裁切。
- 对 AI 这样说：“展开的下拉菜单被下方的横幅图片挡住了。请先检查导航栏外层容器是否设置了 overflow: hidden 导致内容被裁切；解除限制后，将下拉浮层的 z-index 设为较高的数值（如 z-index: 50）确保置顶浮现。”
本章总结
本章梳理了盒模型中内边距与外间距的分工、容器自适应与内容溢出的处理方式，以及层叠层级被遮挡的排查思路。下一章，我们将讨论按钮的交互反馈与候补表单的设计。