核心结论

CSS 规则“写在代码里”，不等于它已经“套用到目标组件上”。当一个间距、宽度或盒模型改动没有生效时，第一步不是继续调数值，而是确认这条 CSS 是否真的被浏览器解析、是否匹配到了正确的 DOM 元素，以及是否被其他规则覆盖。

检查 CSS 是否套到了正确的组件上，是前端布局排查中非常必要的一步。

这次本地 CMS 的问题

本地 CMS 的 Markdown 编辑区需要让文字离中间分割线留出间距。最初已经给 textarea#body 设置了右侧内边距，但截图中长行文字仍然贴近右边，甚至有被裁切的感觉，看起来像是间距没有生效。

这次真正的问题不在 28px 这个数值，而在页面实际输出的 CSS：

  • 页面样式中使用了 :global(*)、:global(body) 等写法；
  • 开发服务器输出 HTML 时，这些写法仍以原文本存在；
  • 浏览器不会把 :global(...) 当成普通 CSS 选择器解析；
  • 因此 box-sizing: border-box 没有真正应用到 textarea；
  • textarea 的 width: 100% 加上左右 padding 后，实际占用宽度超过了父容器；
  • 右侧内边距被挤到边界之外，文字也就显得贴着中间边框。

修复方式是把这些全局规则改成当前页面可以直接识别的选择器，并明确给编辑器组件设置盒模型与宽度约束：

*, *::before, *::after {
  box-sizing: border-box;
}

textarea#body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 15px 28px 15px 15px;
}

修复后，右侧 28px 才真正属于 textarea 自己的内容盒约束，文字与中间分割线之间出现了明确、稳定的间距。

类似问题：卡片宽度与内部组件没有绑定好

在“内容核心”“内容归类”等表单卡片中，也遇到过类似的宽度问题：卡片本身已经分配好了宽度，但内部 input、select 或 textarea 仍然会溢出卡片。

典型原因是：

  • 父级使用 grid 或 flex 分栏，但子项保留了默认的 min-width: auto；
  • 内部组件设置了 width: 100%，却没有统一使用 box-sizing: border-box；
  • 组件的 padding 和 border 被额外加到 100% 宽度之外；
  • 子项没有 min-width: 0、max-width: 100%，导致它按照内容的最小宽度撑开；
  • 最终表现为输入框超过卡片边界，或者相邻字段互相挤压。

这类问题不能只看卡片的 grid-template-columns。卡片宽度、grid/flex 子项宽度和表单控件自身的盒模型必须一起约束：

.field-card,
.field-label,
.field-label > input,
.field-label > select,
.field-label > textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

如果父级是 grid，还应优先使用 minmax(0, 1fr)，明确告诉浏览器：这一列可以收缩到分配给它的宽度，而不是被子内容强行撑开。

一套更可靠的排查顺序

遇到“CSS 改了但页面没变化”时，按下面顺序检查：

  1. 确认目标组件：先在 DOM 中找到实际显示异常的元素，不要只凭外层卡片或截图猜测。
  2. 确认选择器命中：检查 CSS 选择器是否匹配这个元素，尤其注意 Astro、CSS Modules、CSS-in-JS 或预处理器语法是否真的被编译了。
  3. 确认实际输出：查看开发服务器返回的 HTML/CSS。若输出里仍有浏览器不认识的语法，例如原样的 :global(...)，说明规则并没有按预期进入浏览器。
  4. 确认计算样式：在 DevTools 的 Computed 面板检查 width、min-width、max-width、padding、border、box-sizing 和 overflow，不要只看源码。
  5. 确认父子约束：同时检查卡片、grid/flex 子项和内部控件，避免父级限制了宽度，但子项又用默认最小宽度或内容宽度撑开。
  6. 用真实内容验证：短标题可能看不出问题，应使用长标题、长描述和长 Markdown 行测试边界。

开发提醒

布局问题的第一判断应该是“这条规则有没有套到正确的组件上”，而不是“这个间距是不是还不够大”。只有确认选择器命中、CSS 被正确解析、计算样式符合预期之后，继续调整 padding 或宽度数值才有意义。

CSS 的存在、CSS 的解析、CSS 的命中和 CSS 的最终计算结果，是四件不同的事。把这四层逐一确认，通常比反复试数值更快找到真正的布局原因。