查看任何页面上的边距、内边距、边框和间隙。测量距离、审核间距并复制为 CSS 或 Tailwind。
间距检查器显示您在任何网站上悬停的任何内容的边距、边框、填充和间隙。没有开发工具，无需点击面板：打开它并查看间距，每边都有精确的值。
2.0 版本添加了 Figma 风格的测量工具、对页面从 0 到 100 进行评分的间距审核，以及一键复制 CSS、rem 或 Tailwind。
检查盒子模型
• 将鼠标悬停在任何元素上即可查看边距（蓝色）、边框（黄色）、内边距（绿色）、内容以及弹性或网格间隙（紫色条纹）
• 页面右侧所有四个面上的值
• 一张信息卡，其中包含尺寸、显示类型、父元素、盒模型图和间距代码
• 单击以固定元素；使用箭头键移动到其父级、第一个子级或兄弟级
• 4px 或8px 网格覆盖
测量距离（新）
• 按住 Alt，或按 M，然后悬停：查看任意两个元素之间的距离（以像素为单位）
• 在另一个元素内？查看到每个边缘的距离
• 固定测量值并按 Shift+C 将其复制为书面规格
间距审核（新）
• 按 A 扫描页面上的每个边距、填充和间隙
• 检测页面是否使用 4 像素或 8 像素网格，或选择其中之一
• 获取从 0 到 100 的分数以及页面实际间距比例的图表
• 每个离网值都列出了建议的修复方法，例如“填充 13 → 12”
• 将所有修复复制为 CSS 或导出 JSON 报告
复制为代码（新）
• 在任何元素上按 C 可将其间距复制为简写 CSS、rem 值或 Tailwind 类（例如 mt-8 py-3.5 px-7）
为速度而生
• Alt+Shift+S 在任何页面上打开或关闭它（在 chrome://extensions/shortcuts 中更改）
• I、M 和 A 在检查、测量和审计之间切换
• 页面上的工具栏，您可以在不打开弹出窗口的情况下切换模式
• 颜色预设（经典、DevTools、霓虹灯、高对比度）、自定义图层颜色、深色或浅色面板
私密设计
• 免费、无帐户、无广告
• 不收集任何数据，也不向任何服务器发送任何数据：一切都在您的浏览器中运行
• 适用于任何 http 或 https 页面，包括 localhost
非常适合设计师根据设计检查构建、修复布局错误的前端开发人员以及进行设计质量检查的任何人。
网站：https://spacinginspector.netlify.app/