新的文章已经写完了，从技术角度详详细细的介绍了我的理由，朋友们在阅读完本文之后，如果还有兴趣可继续深入阅读 juejin.cn/post/747896…
一一一分割线一一一
目前社区也有不少人提倡禁用 margin，大概原因有什么奇怪的边距融合、责任区域划分不明确等等，我今天从另一个角度来说明为什么不要使用 margin
我们现在处于协同化时代，基本都是靠 figma、motiff 这类在线设计工具看设计稿的。这类工具有写特点
- 没有 margin 概念
- 只有自动布局和约束布局两种方式
- 有研发模式
自动布局等同于 flex 布局，支持设置主轴方向，主轴辅轴对其方式，间距（gap），边距（padding）等等
下面是我随手画的一个例子，在研发模式下，鼠标 hover 到容器上面，会出现蓝色和粉色区域。蓝色就代表 padding，粉色就代表 gap。
约束就是绝对定位，这个很简单，不详细阐述
所以，由于工具的天然限制，设计师在画稿的时候，不会像写代码一些，条条大路通罗马。比如我想让两个 div 相距 100px，css 起码得有 10 种方式。所以我们作为前端开发，拿到设计稿的时候可以放心的相信设计师的打组结构，设计稿一个框，你就写一个 div。因为他们不会有天马行空的骚操作，两个设计师是有很大概率画出结构一样的设计稿的。
实战 我在 figma 画了一个移动端界面
然后切换到研发模式，从外向内开始选中图层查看细节
可以看到结构是一套四，竖向 flex 布局，间距是 29px padding 是 0
// frame 7
<div class='flex flex-col gap-29px'>
// frame 8
<div></div>
// frame 9
<div></div>
// frame 10
<div></div>
// frame 10
<div></div>
</div>
然后直接看最后一个图层，前面的简单就不看了
可以一看看出结构是 flex 横向布局，padding 13px 34px，justify-content: space-between
然后可以继续无脑的写代码了
// frame 7
<div class='flex flex-col gap-29px'>
// frame 8
<div></div>
// frame 9
<div></div>
// frame 10
<div></div>
// frame 10
<div class='flex px-13px py-34px justify-between'>
// star 3
<div></div>
// star 4
<div></div>
// star 5
<div></div>
// star 6
<div></div>
</div>
</div>
然后增加一个回到顶部的 float button，约束为右、下。
hover 到 button 上
发现出现了两条线，指向右和下，这就代表这是一个相对于父元素的右下角的绝对定位图层。只需要无脑写代码即可
// frame 7
<div class='relative flex flex-col gap-29px'>
.....
<div class='absolute right-xxx bottom-xxx w-10 h-10'></div>
</div>
总结
在使用 figma、motiff 这类的工具的情况下，
- 前端程序员可以无脑的根据设计稿分组来写自己的 html，绝大部分情况他们应该是一对一的。
- 应该跟随工具，只使用 flex 布局，绝对定位布局
- 绝大部分情况不应该使用 margin
确实存在一些情况使用 margin 会更方便，我也真实遇到了一些 case。如果你们有想聊的 case 可以发到评论区
