Removing Margins and Padding within Vuetify

Question

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.

Post the css code you tried and preferably a minimal working example so that others can work on it. — ibrahim tanyalcin, May 18 '18 at 20:07
class `fluid` on container should remove margins I think. But anyway - for removing all margins and paddings use classes: `ma-0 pa-0` https://vuetifyjs.com/en/layout/spacing#how-it-works — Traxo, May 19 '18 at 08:37

Traxo · Accepted Answer · 2018-11-19T11:55:13.847

67

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.

edited Nov 19 '18 at 11:55

answered Nov 19 '18 at 11:44

Traxo

18,464
4
75
87

4

Great explanation. Just as a comment; for negative margin and padding, you can use `n` prefix. like `class="ma-n2 pa-n3"` – Mohammad Taherian Jun 24 '20 at 14:29

score 7 · Answer 2 · edited Sep 14 '18 at 18:33

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.

score 2 · Answer 3 · answered Nov 08 '18 at 19:26

2

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

answered Nov 08 '18 at 19:26

echo

99
6

3

This is a borderline [link-only answer](//meta.stackexchange.com/q/8231). You should expand your answer to include as much information here, and use the link only for reference. – Blue Nov 08 '18 at 20:40
Ouh yeah, I love it how SO always encourages people to break the "single source of truth" rule. Why would we want to have a duplicate of the docs here that no-one will ever update? A link is so much better. If it breaks, the information is most probably outdated anyway. But 5 years later it still works :-o OMG! – Fred Jan 23 '23 at 21:51

score 2 · Answer 4 · answered Sep 09 '22 at 06:01

2

To remove paddings from cols, you can add "no-gutters" atribute to v-row:

<v-container fluid>
  <v-row no-gutters>
    <v-col>
     ...
    </v-col>
  </v-row>
<v-container>

answered Sep 09 '22 at 06:01

kostikovmu

411
5
6

Devmor · Answer 5 · 2022-06-17T06:51:58.910

One good way to handle these scenarios is to use a fluid v-container on your main Nuxt entry point like this (default layout):

<template>
  <v-app>
    <v-main>
      <v-container fluid>
        <Nuxt /> <!-- Nuxt's entry point -->
      </v-container>
    </v-main>
  </v-app>
</template>

And now every time you need a full-width section set the container's v-col padding to zero (best is to use pa-0 or px-0 to be specific).

For example, inside my component I have:

<template>
  <v-row class="image-background">
    <v-col class="pa-0">

      <v-container>
        <v-row>
          <v-col>
            <h2 class="text-h2">Some Text</h2>
          </v-col>
        </v-row>
      </v-container>

    </v-col>
  </v-row>
</template>

<style scoped>
.image-background {
  background-image: url("/images/your-image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 25%;
  min-height: 35vh;
}
</style>

To create a full-width section add pa-0 class to it's column element (v-col).

class of .image-background simply adds an background image taking whole width of screen (since it is inside a fluid container with no padding on it's v-col parent).

Notice how I used another container (without fluid attribute) to hold it's content in a responsive manner including it's paddings and media query breakpoints.

I am using Vuetify v2.6.1 and by the way if you're on a vanilla Vue environment this is the whole structure in one piece:

<template>
  <v-app>
    <v-main>
      <v-container fluid>

        <v-row class="some-class">
          <v-col class="pa-0">
            <!-- everything below will take full-width -->
            <!-- unless inside another normal v-container -->
            <img src="/path/to/image">

            <!-- wrap other content inside another v-container -->
            <v-container>
              <v-row>
                <v-col>
                  <h2 class="text-h2">Some Text</h2>
                </v-col>
              </v-row>
            </v-container>

          </v-col>
        </v-row>

      </v-container>
    </v-main>
  </v-app>
</template>

score 0 · Answer 6 · answered Apr 21 '23 at 11:10

0

This is the way I used to do to remove the padding of radio/checkbox

class="ma-n8 pa-n8"/class="ma-0 pa-0" removes, add the negative and positive padding

answered Apr 21 '23 at 11:10

Dhanan jaya kumar

9
2

Removing Margins and Padding within Vuetify

6 Answers6

Linked