layui栅格布局设置列间距不起作用

layui栅格布局支持设置列间距，只需使用预置类layui-col-space*即可。不过实际使用时却始终看不到效果。
根据layui官网文档的说明，只需要在行所在div元素的class属性中增加layui-col-space*即可出现列间距。如下图所示：

但是实际使用时，一般会在行所在div元素中设置行背景色，此时设置列间距就看不出效果。html示例如下所示（示例代码取自参考文献1），将背景样式放在行所在div元素或者每列所在div元素的效果一样，都看不出间距。

html 复制代码

<div class="layui-container">             
    <div class="layui-row layui-col-space10" style="background-color: red;">
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >
        移动：6/12 | 平板：6/12 | 桌面：4/12
      </div>
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        移动：6/12 | 平板：6/12 | 桌面：4/12
      </div>
      <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
        移动：4/12 | 平板：12/12 | 桌面：4/12
      </div>
      <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
        移动：4/12 | 平板：7/12 | 桌面：8/12
      </div>
      <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
        移动：4/12 | 平板：5/12 | 桌面：4/12
      </div>
    </div>
</div>

百度出来的文章（参考文献2-3）给出的解释是layui的间距样式设置采用的是padding（向内缩）在行div或列div上设置背景色会使整行或当前行的列区域全部显示背景色，向内缩的话不会有什么区别。正确的方式是将列内容再用div包一层，同时设置该层div的背景色，这样就能看出列间距效果。如下所示：

html 复制代码

<div class="layui-container">    
   <div class="layui-row layui-col-space10">
     <div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >
       <div  style="background-color: red;">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
     </div>
     <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
       <div  style="background-color: red;">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
     </div>
     <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
       <div  style="background-color: red;">移动：4/12 | 平板：12/12 | 桌面：4/12</div>
     </div>
     <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
       <div  style="background-color: red;">移动：4/12 | 平板：7/12 | 桌面：8/12</div>
     </div>
     <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
       <div  style="background-color: red;">移动：4/12 | 平板：5/12 | 桌面：4/12</div>
     </div>
   </div>
 </div>

同时在行、列、内容上设置背景色时的效果如下所示：

html 复制代码

<div class="layui-container">             
    <div class="layui-row layui-col-space10" style="background-color: rgb(49, 214, 99);">
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"  style="background-color: rgb(47, 15, 207);">
        <div  style="background-color: red;">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
      </div>
      <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
        <div  style="background-color: red;">移动：6/12 | 平板：6/12 | 桌面：4/12</div>
      </div>
      <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
        <div  style="background-color: red;">移动：4/12 | 平板：12/12 | 桌面：4/12</div>
      </div>
      <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
        <div  style="background-color: red;">移动：4/12 | 平板：7/12 | 桌面：8/12</div>
      </div>
      <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
        <div  style="background-color: red;">移动：4/12 | 平板：5/12 | 桌面：4/12</div>
      </div>
    </div>
  </div>

参考文献：

[1]https://www.layui1.com/doc/index.html

[2]https://blog.csdn.net/qq_40943363/article/details/118052587

[3]https://www.jb51.net/article/264158.htm