# 我们为什么要设计el这个属性

我们在使用布局组件的时候,有时候会在item中直接写lgap,hgap,vgap之类的属性,通常最终的页面结果是符合我们的预期的,但是当items中的子组件同时接收lgap作为props的时候,结果就变了,通常会出现间距变成两倍了的情况

```
BI.createWidget({
    type: "bi.left",
    items: [
        {
            type: "bi.label",
            lgap: 10,
        },
    ],
});
```

![示例](../images/3.png)
![示例](../images/4.png)

出现这种情况是因为布局组件会根据itemw中元素的gap属性设置margin值,而子组件也会读取gap属性在组件内部逻辑值使用这个值,因此出现了双倍间距.

采用el做隔离,可以避免这种情况,这时候子组件bi.label并没有lgap属性,但是布局组件依然可以正确获取items子元素的lgap属性

```
BI.createWidget({
    type: "bi.left",
    items: [
        {
            el: {
                type: "bi.label",
                text: "测试",
            },
            lgap: 10,
        },
    ],
});
```

为了简化写法,FineUI新增了下划线+gap属性,如_hgap,_vgap,_lgap等,同样起到了隔离作用

```
BI.createWidget({
    type: "bi.left",
    items: [
        {
            type: "bi.label",
            _lgap: 10,
        },
    ],
});
```