内边距：子元素内容和父元素之间的距离（如按钮文本到按钮的间距） 外边距：父元素框之外的距离（如组件间距） 全局边距：界面两侧的间距
根据产品页面呈现内容不同，全局边距的具体参数值也会有所波动。通常数值为偶数18、16、15、12、10pt，低于10的会让画面过于拥挤（移动端图例为两倍图尺寸@2x）。
以马蜂窝APP为例，其游记页面和攻略页面全局边距就有差异，攻略页面是大图卡片瀑布流，少字大图阅读性高，边距可以适当减小，也可以提高图片展示率。
当然也有边距为0的情况，即内容通栏布局。由于通栏布局会截断阅读视线流，一般在以图片为主场景较为常见，如vsco摄影软件的space合集页是图片瀑布流0边距，Instagram更是随页可见。
组件间距一般就是外边距。卡片式布局是内容布局中最常见的，移动端卡片间距一般是4的倍数（B端多为8的倍数）如10、12、16、20pt等，不建议低于8。图例分别是苹果规范和微软fluent2规范（移动端图例为两倍图尺寸@2x）。
如何定义好的内外边距尺寸？如图所示，显示了三个组，左侧没有用间距建立视觉层次，而右侧的边距是有逻辑的。
为了在视觉上建立层次结构，可以使用俄罗斯套娃之类的“盒子”对元素进行分组，分组后应用以下规则：外边距>内边距，且随着层级深入，元素间距差距越小。这种差值也可以借用4倍或8倍原理，即边距值可以采用24、16、8pt等，随着层级深入递减即可。
定义好边距后，如何走查开发的还原情况呢？这里就不得不提CSS的“盒子模型”。网页元素布局都可以看成一个盒子，每个盒子有4个属性：内容content、内边距padding、边框border、外边距margin。
内容：内容对象有宽width、高height，影响内容尺寸。 内边距：内边距是内容到边框的距离，有padding-top、padding-right、padding-buttom、padding-right。可以对应到设计工具的自动布局属性。会影响盒子尺寸。 边框：边框属性有宽度width、类型style、颜色color。可以对应设计工具中的边框属性。 外边距：两个盒子之间的距离，有margin-top、margin-right、margin-buttom、margin-right。可以是父子之间的间距，也可以是同级兄弟之间的间距。不影响盒子尺寸。
如果是网页应用，可以直接利用浏览器的开发者工具（F12）进行走查，选中想要看的元素，在elments栏即可查看。
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
