我有一个使用 vue init webpack my-project 创建的元素cli 命令。
这是我的main.js文件:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
还有我的App.vue文件:
<template>
<div id="app">
<div id="text">{{ text }}</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
}
}
</script>
<style lang="scss">
.html, .body {
margin: 0px !important;
padding: 0px !important;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin: 0 auto;
padding: 0px;
}
#text {
margin: 0 auto;
padding: 0px;
width: 50%;
}
h1 {
font-weight: normal;
}
</style>
我使用 npm run dev 运行我的网站当我检查 Chrome 上的元素时，我看到 <body>类有一个边距:
我想消除 <html> 中的所有边距和填充和<body>元素，但我所拥有的似乎不起作用。
我错过了什么？
最佳答案
尝试将您的 scss 替换为:
<style lang="scss">
html, body {
margin: 0px !important;
padding: 0px !important;
}
更新:
只是为了让 future 的访客更清楚。正如评论中所注意到的，您有 .html 和 .body ，它们引用了 html 代码中不存在的 css 类。
关于html - 删除 Vue 中 html 和 body 元素的边距和填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59827261/