Removing Margins and Padding within Vuetify

问题

So I'm pretty much brand new to Vuetify and Front End development, so sorry if my question is either simple or maybe even too vague.

I'm trying to build a website with Nuxt and Vuetify, but I'm having an issue with removing the padding around the edges of the pages. I've tried using different components within Vuetify such as fluid, I've tried finding and altering the container css code (which I'm not even convinced I've actually found), I've tried just about anything I have found on Stack Overflow or on the Vuetify github, but nothing is working for me.

Does anyone have some advice on how to actually go about having the container take up the whole page instead of leaving margins and padding on the side? I've spent at least 5 hours over the past 2 days trying to figure this out. This is what I currently have.

回答1:

use spacing helpers:

class="ma-0" removes margins
class="pa-0" removes padding
class="ma-0 pa-0" removes both

Note that these are also props but only for some (grid) components so for example:
<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.

If in some components you can't remove spacing with these classes, then you need to target relevant elements with CSS.

回答2:

Ok, so I was able to figure out what I was doing wrong.

Here

<template>
<v-app light>

    <v-toolbar fixed app :clipped-left="clipped" color="deep-orange accent-3">
        <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>

        <v-toolbar-title v-text="title"></v-toolbar-title>
        <v-spacer></v-spacer>
    </v-toolbar>


    <v-content>
        <v-container >
            <nuxt/>
        </v-container>
    </v-content>


    <v-footer :fixed="fixed" app>

    </v-footer>
</v-app>

So, in my source, everything is laid out in the "default.vue" page, which is here. I was trying to alter the styling in the actual page, so like in index.vue. When I took a closer look at default.vue, I saw the v-container, which I hadn't noticed before (like I said, complete beginner, so this is all pretty new to me). I was able to add

<style>
.container{
     max-width: 100vw;
     padding:0px;
  }
</style>

to default.vue, which corrected the issue I was dealing with. It really just came down to understanding the template in which I'm working with, and finding the correct place to override the CSS.

回答3:

They also have predefined spacing helpers, ie pa-0. https://vuetifyjs.com/en/layout/spacing

来源：https://stackoverflow.com/questions/50417431/removing-margins-and-padding-within-vuetify

标签

vuetify.js