vue学习笔记 vue页面四周留有空白问题

最新推荐文章于 2024-03-30 21:37:12 发布

xjcwzp

最新推荐文章于 2024-03-30 21:37:12 发布

阅读量2.2k

点赞数 8

分类专栏： Vue

本文链接：https://blog.csdn.net/xjcwzp/article/details/118678418

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

在Vue3新建项目中，遇到页面周围存在空白边距的问题。通过修改`index.html`文件中的样式，将body的margin和padding设置为0，成功消除了空白。这是一个快速且有效的解决方法，确保了页面内容从边缘开始显示。

摘要由CSDN通过智能技术生成

参考：vue组件顶部留有空白问题

vue3新建项目后，发现页面四周有留白
在这里插入图片描述

解决办法：
修改index.html样式
在这里插入图片描述

添加样式

<style>
    body{
       margin:0;
       padding:0;
     }
 </style>

index.html 如下

<!DOCTYPE html>
<style>
  body{
     margin:0;
     padding:0;
   }
</style>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

结果
在这里插入图片描述

xjcwzp

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记 vue页面四周留有空白问题

参考：vue组件顶部留有空白问题vue3新建项目后，发现页面四周有留白解决办法：修改index.html样式添加样式<style> body{ margin:0; padding:0; } </style>index.html 如下<!DOCTYPE html><style> body{ margin:0; padding:0; }</style&gt
复制链接

扫一扫

专栏目录