浏览器本地处理

CSS 盒模型间距调试器

CSS 盒模型间距调试器,用滑块实时调整 margin 与 padding,预览布局变化并生成可复制的间距代码。

本地运行

输入

输入

外边距

margin

内边距

padding

结果

输出

实时预览

盒模型
内容区域
橙色代表外边距
青色代表内边距
白色代表内容

拖动滑块即可实时生成 CSS。

CSS 边距可视化工具帮助前端开发者、设计师和学习者直观看懂盒模型。你可以分别调整上下左右的 margin 与 padding,中心盒子会在浏览器本地实时变化,并同步生成可复制的 CSS 代码。整个过程无需上传、无需登录,也不会把样式数据发送到服务器。作为 Micro Tools Matrix 的免费在线开发者工具,它适合快速验证间距方案、编写组件样式、制作教学示例,或在移动端检查小尺寸布局。通过浏览器本地处理,你可以安全地尝试不同数值,减少反复切换设计稿和编辑器的时间。