最近在做一個網站項目，遇到一個body頁面布局四周留白的問題，以下是解決方法：
1、需求
負責人在查看效果時，發現body頁面布局的四周留有空白，認為影響美觀，讓其去掉四周留白。
2、項目環境
項目中使用的是 vue + vue cli + element ui 搭建
3、解決過程
3.1 這是頁面渲染出來的效果，四周有明顯的留白，並且圖片兩側的留白有兩層；
image.png
3.2 打開F12控制台后，發現紅色框這里的留白是因為使用了element-ui 中的布局容器 el-main 的原因，el-main 這里有個默認的內邊距padding : 20px，去掉勾后默認的邊距就沒有了。這時還需要在css樣式里把padding添加進來，否則頁面不生效；
image.png
.el-main{ width: 100%;height: 100%;text-align: center;background-color: rgba(251,252,252,1); padding:0; //這里要再添加 padding，頁面才能生效 } 3.3 解決了el-main 布局容器默認的padding后，我們還有一個更小一點的邊距沒有解決，這時，繼續打開F12控制台，發現是body頁面默認的外邊距margin : 8px 引起的原因；
image.png
3.4 通過給 vue-cli 目錄結構下的 index.html 文件中<head>里設置外邊距margin ： 0，這樣就解決了body頁面默認的外邊距啦~~
image.png
參考：
鏈接：https://www.jianshu.com/p/877a4a24dd6c