Vuetify Tutorial #12 - Padding & Margin

Key Takeaways

alright then so now I'd like to talk a little bit about padding and margin so the way this works in beautify is by using CSS classes and they follow this structure right here I'm just going to zoom in so you can see this it's the property then the direction then - then the size so first of all the property that's either margin or padding and we use either M or P to refer to those so say for example we want to create a class which is going to control the margin the first property for us would be M then it's the direction so the direction would be where do we want to apply this margin or padding do we want it to the top in which case it will be T the bottom be left L right our x applies to the space in to the left and the rights of the X direction and the y applies it to the top and the bottom so the Y direction a stands for all and it applies the margin or the padding in all directions so say for example I want to apply a margin to the left and right of an element then I would say M X foot left and right - then the size of the margin now the size can be anything between 0 and 5 5 being the biggest and 1 being the lowest now it uses this space of variable to control the size of the margin and x is it by this number right here so you can see as we go up then ik x is it by a larger number which is why we get a larger margin and the same is true for the padding so again we could say something like M X - 3 and that would give us a margin of strength 3 in the X direction so left and right if we wanted to apply padding in all directions to a strength of 2 then it would be P a for all - to make sense ok cool so let's give this a whirl I'm going to go over to our project and you see this is right flush against the navigation I'd like to move this out a little bit now we could do that by going into our different components let's get rid of these files first of all we could go to team and do it here dashboard and do it there and project and do it there as well but instead of doing this three times instead what we could do is just go to app top view and we could do it once right here okay because right here inside the content that is where our other content is being loaded in this stuff so what we could do is just apply a margin to this thing which is going to move whatever is nested inside here so we can just a meet once and every single page is going to get this margin okay so let's add a class here then and do this in non caps so class is going to be equal and we want margin we want it in the x-direction - and a strength of four so if I save that now and preview this then we're going to see this come away from the navigation and the matter what page were on is doing it for each one okay cool so that's the first thing done the next thing I'd like to do is apply a margin bottom to this content as well now the way we do that is by seeing em be and then - whatever the strength is I'm going to say four again and we get a margin of four at the bottom or strength for now we're not going to notice that now but we will notice that later on okay so I'd like to just style this a little bit differently over here so I'm going to go to my projects component and I'm going to give this a class right here and the class is going to be subheading so that's going to make it a little smaller and also we want gray text so gray - - text now I'm going to copy this stuff right here because I'm going to apply this text to each one of the H ones on the pages so let's do the same thing there and then go to team and do exactly the same thing here as well save that and that should start to look a bit better cool that looks nice if we go to dashboard and team they have the same styling awesome okay so we can also apply padding on margin to the main content as well at the minute we're just applying it to the h1 at the top but ideally we want some margin around the main content which is going to sit in the middle as well now when we come to create the content we're going to be probably using the grid system now whenever we use a grid we generally place it inside a container element and a container element keeps everything within a central width on the page and it also helps to stretch our content for different screen sizes so the way we create a container is by saying v - container by the way I'm on the team page at the minute but we'll do this on each page so don't worry and then inside will say content so let me just save this and view the team page first of all and we can see this content right here so I'd like to apply a margin to this content at the top to bring it down quite a bit so to do that I'm going to give this a class equal to M and then we're going to do this in the y-direction top and bottom so we'll do a Y then - 5 which is the top strength so a large margin top and bottom and now you can see it's come down quite a bit okay now watch this when I get rid of the menu this thing right here this stays in a central column and I can demo this what I'm going to do is just add a pizza and then some lorem like so and then I'll add another P tag as well with some lorem and press save view this in a browser again so now we can see all of this is within a central column we have this margin left and the margin right and that is what this container is doing for us it's keeping everything inside that central column and when we do a grid we're going to add it inside the container so that that grid is kept within that central column now if you wanted your container to be full width you can override this behavior by saying fluid like so and that's going to make it full width like so we see we have a much smaller margin now but I don't want to do that I want to keep everything within this central column so I'll take away fluid and do it like that and notice this when I make the screen smaller this is going to jump so at this screen size right here you jumped in and made that central column smaller okay so the margin on each side is larger and then it gets to a certain point where it just goes to 100% width so that's nice and responsive it keeps everything in the center with the margin left and right cool okay then so let me just get rid of this lorem ipsum and just say instead contents and then I'm going to grab this because we're going to do a similar thing on each page we're going to put our content inside a container so let's go to dashboard and do the same thing we have the same margin applied save that and also in projects with the same margin and now let's see this in a browser dashboard we have the content projects content and seeing we have the content awesome so then we've got my friends that is margin and padding for you