Layout布局：
间隔 通过gutter来指定
<el-row :gutter="20" style="margin-top: 30px">
<el-col :span="8" class="box">1</el-col>
<el-col :span="8" class="box">1</el-col>
<el-col :span="8" class="box">1</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 30px">
<el-col :span="8" style="height: 30px; background: #ccc">1</el-col>
<el-col :span="8" style="height: 30px; background: #ccc">1</el-col>
<el-col :span="8" style="height: 30px; background: #ccc">1</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 30px">
<el-col :span="8"><div class="box">1</div></el-col>
<el-col :span="8"><div class="box">1</div></el-col>
<el-col :span="8"><div class="box">1</div></el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 30px">
<el-col :span="8">1</el-col>
<el-col :span="8">1</el-col>
<el-col :span="8">1</el-col>
</el-row>
一开始我觉得是样式的原因，通过上图可以看出，无论时使用样式选择器，还是直接写style样式，gutter都会失效
后来发现，gutter的实现是由el-col上的padding实现的，饿了么给每个el-col左右指定了相同的padding,里面使用一个盒子，我们看到的其实是里面这个盒子的宽度，因此使用时需要在el-col里使用一个div将我们要写的内容包裹起来，否则gutter会失效，在此div上写样式就没问题了