解决在element-ui中使用Container 布局容器时出现白边问题-------解决在element-ui中使用

环境架构

vue2 + vue-cli + element-ui 构建

问题背景

在使用element-ui的Container布局容器编写基于vue-cli环境下的前端页面时发现在浏览器四周分别有白边生成如图

问题分析

受【简书】解决vue element-ui body页面默认边距- @web28的启发，使用f12打开控制台观察其初始style，发现body中具有8px的外边距样式

需要注意的是观察控制台中的8px样式是加在bady中的，故若消除白边只能将body中的margin置0px，而无法通过设置<template>下的根元素style消除

问题解决

根据控制台中的展示，只要在body中添加margin: 0px样式即可解决白边问题

代码：

<template>
  <div id="app" >
    1111111
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
  body{
    margin: 0px;
  }
#app {
  background-color: red;
}
</style>

效果图：

问题思考

原本以为白边是element-ui生成的，但是使用npm uninstall elementui拆卸掉element后依然存在该style，初步判断是body原本具有相关边距样式

参考资料

【简书】解决vue element-ui body页面默认边距- @web28 www.jianshu.com/p/877a4a24d…