CSS 盒模型检查：查看并复制内外边距
一款 CSS 盒模型检查工具，可显示元素的盒模型、四边的内边距和外边距、间距（gap）、圆角和 display，点击即可复制每个值。
更新于
Ag
- Ink
- Amber
- Paper
布局看起来不对劲，而修复往往从一个元素开始。可能是按钮的内边距太紧，或卡片周围的外边距太宽，你只想拿到具体数值，不想在 DevTools 里翻找。CSS 盒模型检查工具让你省去这一步。把鼠标指向元素，Box 区域就会显示它的盒模型，逐边列出每个数值。SuperchargeInspect 会替你读取这个元素的数值。
CSS 盒模型检查工具能显示什么
Box 区域会按层绘制元素的盒模型，从外到内依次为：外边距（margin）、边框（border）、内边距（padding）和内容（content）。元素的每一边都有各自的数值，因此上、右、下、左会分别显示。
中间显示内容框的宽 × 高（以 CSS 像素为单位），即元素的文本和子元素所在的空间。面板中的内容尺寸以整数显示。
在图示旁边，该区域还单独列出三个数值：间距（Gap）、圆角（Radius）和显示方式（Display）。Radius 即 border-radius 的值。每个数值都可以单独查看，点击即可单独复制。
如何看懂元素盒模型
下表每一行列出元素盒模型的一个部分，以及间距看起来不对时应调整什么。
| 数值 | 含义 |
|---|---|
margin | 边框外侧的空间，每一边分别显示 |
border | 包围内边距的线条，每一边分别显示其宽度 |
padding | 边框与内容之间的空间，每一边分别显示 |
| 内容 | 内容的宽 × 高，单位为 CSS px |
gap | 元素各子元素之间的间距 |
| 圆角 | 边角的圆角大小，取自 border-radius |
display | 布局方式，例如 block、flex 或 grid |
按照从外到内的顺序查看，与图示的绘制顺序一致。
复制间距数值
Box 区域中的每个数值都是一个按钮。点击上内边距，就只复制这一个数值。点击 gap，就只复制间距。每次只复制一个数值，因此你只需粘贴要修改的部分。
如需复制全部数值，请打开“更多复制方式”菜单，选择“仅复制文本”。其中包含完整的已检测样式列表：内边距和外边距的 px 数值按上、右、下、左的顺序排列，随后是 gap、border-radius 和 display。
它不能测量什么
它一次只读取一个元素，且仅限一个。没有标尺、没有参考线、没有 Grid 或 Flex 叠加层，也不能测量两个元素之间的距离。要比较两个元素，请先锁定第一个元素，记下它的内边距和外边距，然后用方向键移到另一个元素查看其数值。
键盘操作与隐私保护
按 Alt+Shift+E 开始，然后用方向键在元素之间移动。按 Ctrl+Up 和 Ctrl+Down 跳到父元素或子元素，macOS 上则为 Option+Up 和 Option+Down。跳到父元素可以看出是哪一层容器增加了间距。按 Enter 锁定元素，按 Esc 返回选取状态或关闭面板。
整个功能完全在本地运行。它不发起任何网络请求，也无需账号，因此你检查的任何内容都不会被发送到任何地方。