马上默 在线轻量工具箱
登录

8pt 栅格间距计算器

所有间距都落在 8（或 4）的倍数上，界面才会稳定不抖动。本页把任意尺寸吸附取整，生成 4–64 间距梯度表（含 rem、Tailwind 类名、CSS 变量），并实时算出内容 + 内边距的外框尺寸、预览两盒间隙。纯浏览器本地计算。

1基准与吸附

切换基准后，下方所有输入都会按最近倍数吸附。

内容 + 内边距 → 外尺寸
外框宽 = —
盒 A
16px
盒 B

2间距梯度表

点击任意单元格里的代码即可复制。rem 按 1rem = 16px 换算。

档位pxremTailwindCSS 变量比例

3导出 CSS 变量

按当前基准生成间距令牌，可直接粘进项目，或下载为 CSS 文件。


      

        
        
        
        
      

    


    

      
四套栅格方案对比与吸附误差扫描

      
用当前输入同时比对 4pt / 8pt / 10pt / 12pt 四套基准：表格给出吸附结果与最大偏差，下方曲线扫描 0–256px 内每个取值的吸附偏差——锯齿越高，意味着这一基准下的跳档越明显。

      

        

          
方案吸附后宽吸附后高吸附后间隙外框宽最大偏差0–64 档位

          
在上方输入尺寸后显示方案对比

        

      

      

        
      

      

        
        
        
      

      

    


  



  

    
方案管理 · 数值对比 · 导出

    
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。

  

  

    
    
    
    
    
  

  

    

    

      
最近方案 暂无

      

    

  

  









    
    

        

            
📐口径说明与常见误填

            
把栅格口径说清楚，间距才不会各写各的。

        

        

                            

                    
吸附规则

                    
输入尺寸按最近倍数取整：8pt 基准下 237 → 240；4pt 基准允许半档（如 14 就近吸附 16/12）。切换基准后全部输入重新吸附。

                

                            

                    
间距梯度

                    
梯度表生成 4–64px 档位，附 rem（按 1rem = 16px）、Tailwind 类名与 CSS 变量三口径；8pt 出 8/16/24…，4pt 多出 4/12/20… 半档。

                

                            

                    
外框计算

                    
外框宽 = 内容宽 + 2×内边距（content-box 口径），结果同步给出吸附值；用 border-box 时请直接把外框尺寸当输入。

                

                            

                    
Tailwind 对照

                    
Tailwind 间距类按 4px 步进：8pt 恰好对应偶数档（p-2=8、p-4=16、p-6=24、p-8=32、p-12=48、p-16=64），梯度表已逐档换算。

                

                            

                    
盒间隙

                    
「盒间隙」指两个盒子之间的 gap / margin，按同样规则吸附；预览区实时显示吸附前后的间隙对比，13 → 16 这类跳档一眼可见。

                

                    

    


    
    

        
        
        
        
        
    


    
    

        

            
这个工具解决什么问题

            
界面抖不抖，看间距有没有落在同一套栅格上。本工具以 8pt（或 4pt 半档）为基准：输入任意尺寸自动吸附取整，生成 4–64 的间距梯度表并附 rem、Tailwind 类名、CSS 变量；「内容 + 内边距 → 外框」实时计算，两盒间隙可视化预览，最后把整套间距令牌复制或下载成 spacing.css 直接进项目，浏览器本地运行。

            

                
三条栅格铁律

                                    
① 档位宁少勿多：常用 6–8 档足够（4/8/12/16/24/32/48/64），每多一档规范的约束力就弱一分；组件内边距用 8–12，卡片 16–24，区块间 32–64。

                                    
② 4pt 只做半档应急：1px 描边旁的微间隙、小图标尺寸允许落在 4 上，大布局必须回到 8 的倍数，否则等于放弃栅格。

                                    
③ 换算 rem 先定基准：梯度表按 1rem = 16px 换算，设计稿 750px 宽或 1rem = 14px 的项目要先统一口径再落令牌，避免半像素发虚。

                            

        

    


    
    

        

            
怎么用

            
    
                                    
  1. 
                        
    第 1 步 · 选基准并输入尺寸
    
                        
    顶部切换 8pt / 4pt 基准，在「元素宽度 / 高度 / 盒间隙」输入实测值（如 237），输入框右侧灰字实时显示吸附结果（237 → 240）。
    
                    
    2. 
                                    
  2. 
                        
    第 2 步 · 算内容加内边距的外框
    
                        
    填「内容宽」与「内边距」，「外框宽」按 内容 + 2×padding 给出精确值与吸附值，预览区同步显示两盒间隙。
    
                    
    3. 
                                    
  3. 
                        
    第 3 步 · 查梯度表取令牌
    
                        
    右侧「间距梯度表」列出 4–64 每档的 px、rem、Tailwind 类名与 CSS 变量，点击任意单元格里的代码即复制。
    
                    
    4. 
                                    
  4. 
                        
    第 4 步 · 复制或下载 CSS 变量
    
                        
    第 3 区「导出 CSS 变量」按当前基准生成整套间距令牌，点「复制 CSS 变量」或「下载 spacing.css」接进项目。
    
                    
    5. 
                            

        

    


    
    

        

            
更新记录

            
    
                
  • 
                    v1.0
                    2026-11-02
                    v1.0 上线：8pt/4pt 双基准吸附、4–64 间距梯度表（rem / Tailwind / CSS 变量三口径）、内容+内边距外框实时计算、两盒间隙预览、令牌复制与 spacing.css 下载。
                
    • 
            

        

    


    
    

        

            
常见问题

            

                                    

                        8pt 栅格系统怎么用？
                        
规则只有一条：所有尺寸、间距、内边距都取 8 的倍数（4 作为半档应急）。画稿时开 8px 参考网格，开发时把间距收敛为 4/8/16/24/32/48 等少数档位，本页的梯度表就是可直接落地的令牌清单。

                    

                                    

                        UI 间距为什么是 8 的倍数？
                        
8 能被 2 反复整除，在 1x / 1.5x / 2x 屏幕缩放下都落在像素边界上，不会半个像素发虚；同时它把间距选项压缩到十来个，团队决策更快，界面节奏天然对齐，视觉抖动显著减少。

                    

                                    

                        设计规范的间距梯度怎么定？
                        
常用 6–8 档：4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。小组件内边距用 8–12，卡片内用 16–24，区块之间用 32–64。档位宁少勿多——每加一档，规范约束力就弱一分。可点击梯度表复制对应 CSS 变量。

                    

                                    

                        4pt 和 8pt 网格哪个好用？
                        
纯 8pt 纪律性最强但偶尔太宽（如 1px 描边旁的 4px 微间隙）；8pt 为主、4pt 为半档是主流折中。图标、徽章等小元素允许落在 4 上，大布局仍回到 8。本页切换基准即可对比两种梯度。

                    

                                    

                        界面留白间距计算工具有哪些坑？
                        
坑一：内容 + 内边距忘了算外尺寸，盒模型 border-box 与 content-box 结果不同，本页按 content + 2×padding 明确给出；坑二：设计稿 750px 宽换算 rem 基准不一致；坑三：Tailwind 类名按 4px 步进，8 的倍数恰好是偶数档，对照表已帮你换算好。

                    

                            

        

    


    
    

        

            


    
    

        
💬 留言板 0

        全部留言需审核通过后展示
    

        

        

        
💬

        
还没有留言，来抢沙发吧！

    

    


    
    

        
        

            ✍️ 说点什么
                            
                    


                

            
            

        

        
        

            
            
0 / 500

            

        


        

            

                
                图形验证码
            

            

        


        
    


    
    


        

    


    
            

            
🔗 相关工具

            

                                    
                        🔤
                        模块化字阶生成器字号梯度与行高对照
                        →
                    
                                    
                        🎨
                        色阶与深色模式映射器主色派生十档色阶
                        →
                    
                                    
                        🧩
                        Tailwind类名速查器原子类像素值对照
                        →
                    
                                    
                        📦
                        盒模型可视化调试器两种 box-sizing 图解
                        →
                    
                            

        

    




    

        
👣 做完这一步，顺便看看

        

                            
                    📱
                    
                        手机样机 Mockup 生成器
                        上传应用截图即可套入 iPhone、Android 或经典款…                    
                    →
                
                            
                    🌈
                    
                        色盲模拟器
                        输入颜色或上传图片，按红色盲、绿色盲、蓝色盲与全色盲标准色彩…                    
                    →
                
                            
                    🔤
                    
                        模块化字阶生成器
                        以基准字号与比率生成模块化字阶：内置黄金比、大三度等八种经典…                    
                    →
                
                            
                    🎨
                    
                        色阶与深色模式映射器
                        输入主色 HEX 自动校验并派生 50 到 900 十档色阶…                    
                    →
                
                    

        全部工具 →