vueelement-ui饿了么布局 gutter间距碰上bordr会失效

Vue-Element-UI中Gutter间距碰上border会失效的问题

Vue-Element-UI作为一款非常优秀的前端组件库，在实现页面布局时不可避免会用到Gutter间距的设置。然而，我们发现设置Gutter间距时，如果碰上了border边框，会出现Gutter失效的问题。如何解决这个问题呢？

问题的产生

首先，我们先来看一下问题的样例：

在这个样例中，左边部分的代码是一个Element-UI的Row，同时设置了gutter: 20，以及右边一个div容器设置了边框。

我们可以发现在这种情况下，Gutter之间的20px间距被border占用，导致实际这个间距并不存在。我们通过挪开第2个div可以看到这个问题更加明显。

相信这不止我一个人遇到了这个问题，那么我们怎能解决这个问题呢？

解决方案

Element-UI官方的解决方案就是调整CSS样式，给Row和Col设置减去border-width的margin，解决这个问题。但是这种解决方案会增加我们工作的麻烦程度，我们可以通过使用自己的CSS样式表来做到避免这种不必要的调整。

在我们的自定义CSS样式表中，我们需要做到以下两点：

1. 让容器的border不占用Gutter位置

我们可以通过在容器的CSS样式表中设置负边距来达到这个效果。例如：

.container {
  border: 1px solid #eee;
  margin: -10px;
  padding: 10px;
}

其中，margin: -10px;这一行的目的就是让容器的border不占用Gutter位置。在这个例子中，我们让margin等于gutter的相反数，就可以把border的宽度“还回去”。

2. 让容器内部的元素自动利用Gutter

在容器内部的元素上，我们只需要设置一个与容器相反的margin值即可。例如：

.container .item {
  margin: 10px;
}

其中，.container .item表示容器内的元素，由于我们设置了margin: -10px，那么相反的整数，也就是margin: 10px即可让元素自动利用Gutter的宽度。

综上所述，我们通过自定义CSS样式表的方式，可以在不增加过多工作量的情况下，解决掉Element-UI中Gutter间距碰上border会失效的问题，让我们的页面布局更加美观和实用。