ant-design中a-row的gutter

Question

这个属性gutter为什么要这么设置

设置的row的margin为负数，设置col的padding为正数，

Answer 1

就是对齐最外面这一圈与容器盒子。

<container>
   <a-row>
      <a-col></a-col>
      <a-col></a-col>
      <a-col></a-col>
   </a-row>
   <a-row>
      <a-col></a-col>
      <a-col></a-col>
      <a-col></a-col>
   </a-row>
</container>

注意左侧和右侧的列，跟外容器之间是没有间隙的。

无论你单独调整 margin 还是单独调整 padding，都达不到 container 跟里面的元素是对齐的效果。

当然你也可以用 CSS 伪类（:first-child、:last-child 那几个）去控制，但维护起来显然不如现在这样方便。