如何解决Vue3页面左右两侧的白色小边框问题

问题根源 #

浏览器默认给html和body设置了8px左右的margin，而你的组件样式是scoped，无法直接修改全局的html/body默认样式，这就是你之前调整body和#lamyPage无效的核心原因。另外.home容器的默认布局也限制了背景的铺满范围。

具体解决步骤 #

1. 添加全局样式重置
   在项目的全局样式文件（比如src/assets/global.css，或者App.vue的非scoped<style>标签里）加入以下代码，清除浏览器默认边距并确保页面无横向滚动：

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   html, body {
     width: 100%;
     overflow-x: hidden;
   }
   

2. 调整组件内的.home样式
   修改你的组件scoped样式里的.home类，确保它无内边距且占满宽度：

   .home {
     /* 若不需要上下间距，可删除原有的padding-top和padding-bottom */
     font-family: 'Kanit', sans-serif;
     display: flex;
     flex-direction: column;
     width: 100%;
     margin: 0;
     padding: 0;
   }
   

3. 简化#lamyPage样式（可选）
   原#lamyPage里的width:100%和height:100%属于冗余设置，因为flex布局下子元素会自动撑满父元素宽度，保留min-height:100vh即可保证背景铺满视口高度：

   #lamyPage {
     background: linear-gradient(to top, #0ea5e9, #65C2F5);
     text-align: center;
     color: white;
     min-height: 100vh;
     padding: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-size: cover;
   }
   

这样就能彻底消除页面左右的白色边框，让背景完全铺满整个页面。

内容的提问来源于stack exchange，提问作者JInSeok