MARGIN-TOP vs MARGIN-BOTTOM (Which Camp Are You In?)

0:00:00
What’s up everybody welcome back to the channel I gotta tell you I am I’m smoked we went like a two-month sprint to get automatic that CSS ready for launch we did the beta launch inside the inner circle went absolutely fantastic smashed it crushed it did the public launch the week after that crushed it again over 1325 sales of automatic that CSS the goal was here are the goals 500 was like gonna be a decent I was gonna say that’s decent a thousand was gonna be that’s great that’s fantastic that’s amazing we got 1300 and 20 over 1300 and 25 so that is just absolutely phenomenal and it proves that automatic that CSS is absolutely here to stay and we are we are now poised we are going to be I just let you know I’ll put you on notice we are taking over the utility class space okay anyway I don’t want to get too deep into that we’ve got a training video to do on margin top versus margin bottom I want to see which camp you are in and I’m gonna tell you why I recently switched from the margin bottom camp to the margin top camp we’re gonna talk about it we’re gonna take a look at an example I also do want to say it is December we have just hit the six month mark on the launch of the inner circle so we’re we’re celebrating the six month anniversary of the inner circle and I got to tell you I’ve got so much stuff planned for the inner circle in 2022 things are going to get so more interactive we might even have some different levels to the inner circle I can’t reveal anything yet but there is a lot of really exciting stuff in the works and I’m getting message after message from people telling me thank you so much for what what you do in the inner circle and here’s why and it’s not just because of saving them time on development and helping them learn oxygen and helping them do all this other stuff on the agency side of things there is person after person after person free after freelancer after freelancer agency owner after agency owner messaging me telling me Kevin I’m using your proposal templates I’m using the stuff that you’re teaching in the inner circle and the access that you are giving us access to I’m closing more deals I’m closing deals at double the price triple the price as what I was doing before I’m getting clients to prepay for their projects I’m not chasing payments anymore like this message after message and I can’t be happier to hear that stuff it’s exactly what motivates me like nothing makes me happier put the automatic CSS stuff aside put the yeah I help people with oxygen training nothing helps nothing makes me happier than hearing people elevating their game financially and getting themselves better off and like I like for $20 a month is the value that you get in the inner circle is insane and and pretty much anybody that’s in the inner circle will tell you that but that’s what I’m most proud of and I just wanted to that to not be overlooked that we do have the six-month anniversary of the inner circle and it’s it’s really unsettling for me honestly like the amount of things that I want to do for automatic CSS the amount of things that I want to do for the inner circle it’s there’s this tension where it’s like I want I want to I want to but at the same time there’s only so much time and a day and there’s only so much energy and one human being it’s like I have to pace myself and I have first of all I have to get to these holidays that are coming up and relax and rest and recharge but coming back in 2022 I’m just gonna have to remind myself I got to pace myself and we are going to get there eventually we can’t get there all at once even though I want to and I wish I wish I could get there all at once because what I have planned for both automatic CSS and the inner circle is just really really fun and really exciting and so I wanted to you know as we kind of close out this year there will be more trainings you know before Christmas and the holidays new year and all of that but I just want to take a minute to thank all of you for your support everybody who subscribe to this channel everybody who’s liked my videos and commented for those of you who are members in the inner circle already for those of you who purchased automatic that CSS just thank you I’m really honored I’m really excited as to what we’re building and where we’re gonna go so with that said let’s go ahead and get to training all right that was a good four solid minutes for those of you who hate the amount of talking that I do all right just for you all right so we’re gonna open the builder by the way I’ve been doing this in Firefox a lot more lately and I’m really you know I’m noticing a huge speed difference over brave when using Firefox now one thing is okay I’m gonna pause tutorial I’m gonna take off Swiss knife real quick and then we’re gonna keep going because this is not working for me okay so I just had to clear out the Swiss knife it was like breaking my brain with their new layout and all that I just wanted a blank slate nice clean simple to to start from so I pulled up this little hero section on dribble we’re not gonna design this whole thing but I do like to bake in other like many lessons into trainings that I do so we will style some of this stuff so that you know any beginners can see how that’s done but mainly what we’re gonna be doing in this training is talking about margin top versus margin bottom because I think the default is for people to add margin to the bottom of elements in order to space elements away from each other and if you look at a lot of frameworks margin bottom seems to be the predominantly used utility class and I’ve been playing a lot lately with margin top and I think we need to explore and decide what camp you’re in if margin top is more efficient and more logical than margin bottom we’re gonna do both and we’re gonna take a look at the differences and I think you’re gonna fall where I’ve been falling in the camp of like hey we should probably be using margin top for most of this stuff so let’s go ahead and get to buildings I’m gonna add a section and we are going to add a I’m gonna add a div and this is gonna be a grid we’re not gonna put anything on the right side of the grid but then we’re gonna add text heading text button button okay text heading button button so let me add a div let’s put a background color on here so we’ll do base light and then we will do grid and we’ll do two and we can actually just do grid auto to I suppose so we’ll just do grid auto to and then we’ll do div and then we’ll do a duplicate and then we will select that whole entire wrapper and we’ll do gap of maybe Excel okay now like I said we’re gonna add a text we’re gonna add a heading we’re gonna add more text and then we’re gonna add a div for a button wrapper all right and then this is gonna have inside of that div a button and we’re gonna duplicate that button perfect okay so if we look here we have all of our elements nothing is styled yet obviously but we have all of our kind of elements that we need to work with so let’s get some text in here so we’re gonna say fastest delivery service that’s gonna be this fastest delivery service and I’m gonna make this ultra light just we don’t have to do like extra work with our text and all that to get it readable all right we are ready to deliver your goods all right so we’re gonna say we are ready to deliver your goods perfect and then we’re going to add I don’t know what that says down there thousands of service points spread all over Indonesia okay so we have thousands of locations spread all over the United States all great fantastic I’m just gonna capitalize that none of this matters okay and then I’m going to grab this little button wrappers I’m grabbing the wrapper around the two buttons and I’m gonna do a great of two on this and then I’m gonna do a grid of auto or I’m not a great of auto I’m sorry that’s a width of auto and then I’m going to add a gap of S and then I’m gonna add our text so find location and need help so find location and that should really say okay like oh I see it’s not a button so let’s get rid of that let’s do a text link perfect and good let’s grab this horizontal and center middle there we go get that alignment all set and then it says need help question mark okay it did not select all need help question mark perfect now let’s do a button primary on this these are all automatic dot CSS classes we also could have done this alignment with utility classes okay so we are let’s do text base ultra dark that’ll kind of make that text actually let’s do instead of ultra dark text base dark there we go that’ll kind of make those colors all mesh together automatically and then what we can do is we can make this a little bit bigger the way that we would do that just because this is obviously much bigger text this is already an H1 so we’re just gonna override the H1 size in automatic so I’m gonna go into the dashboard and I’m going to go to automatic CSS oh this actually isn’t the latest version because this is my sandbox site all right so I’m gonna go it’s okay I’m gonna go to typography we’re gonna scroll down to the XXL overrides and I’m gonna do 3.2 and we’re gonna try like 5.4 that’s the XXL max and min and then we’ll take a look at this on the front end that’s pretty much perfect that’s right where I want it to be okay let me reload the builder so that we can see that in the builder as well and then we’ll be ready to take a look at margin top versus margin bottom spacing because now you see all these things are super squished together oh before I give you the goods let’s do one more styling thing so we’re gonna call this H accent and we’re gonna style it like our example right here so fastest delivery service and that looks like it’s gonna be a primary color so H accent we’re gonna use a variable so we’re gonna go var primary and it’s gonna make that our primary color and then I’m gonna add that little dash to it so the way we’re gonna do that is go to layout flex and then we’re gonna go to the before and we are going to display that flex as well we’re gonna go to size and spacing the height is gonna be two pixels the width is gonna be 2m and let’s see the background is gonna be var primary and then we’re gonna need to go to our main H accent and we’re gonna go back to layout and we’re gonna say this is gonna be a row and we need to center everything now you see it’s pretty much there the way they have it except we need to go back to the before pseudo element that’s the line the little dash line and we add a little margin to the right of it maybe like 0.75 m okay so that’s how you would style something like that and if we look at our design all we need to do here is like a width of s and then probably an opacity of like I don’t know 60 or you could use like a light you know one of the light color shade variations but that gets us pretty pretty close okay all right now we need spacing so let’s talk about margin bottom versus margin top I’m gonna duplicate this so that we can do it twice and I’m gonna put a blank section in between them just so we have some space all right so what people would normally do is they would come at a margin bottom class to this like s and they would do margin bottom maybe here of m and they would do a margin bottom here maybe of n as well maybe even a large there I’m not sure let’s see again in our example okay this looks like this is more of the s variety so margin bottom small all right and then let’s take a look all right so we’ve done our margin bottom now here’s the thing about margin bottom if you remove something margin bottom is spacing that’s applied because there’s an element related to another element okay there’s a problem with this an inherent problem and it’s that it relies on there being another element and if you’re making changes and you’re deciding certain things for example what if I wouldn’t do this but there are cases where this would happen what if I took this first element you’re also the margin bottom relies on the position of elements related to each other so for example because this was the first element if I drag it down here right it makes this the first element if I drag it all the way down here it makes not in that div sorry let’s try to get it oh oxygen there we go if I drag it all the way to the bottom you see because this was the last element it has there’s no spacing now right and I was moving this element but that forces me to go to this element to add a margin bottom to it so you see how those like are related to it’s it’s the the margin is based on another element not the element you’re working with even though I’m moving an element I now have to go to another element and change it in order to make these two things work together so I’m gonna put that back at the top the same thing happens when I remove an element oh and now well let’s just look at it right this was here so I decided well shoot I need to go add margin well no that’s back in my grid because oxygen okay thank you I went to this to add margin bottom because this existed but when this no longer exists I’m just moving it I’m like well now I got to do more work I got to go here and I got to remove a margin bottom class the same is true if I was like oh we don’t need those buttons okay let me copy them so I don’t want to delete them but I remove them because the clients like oh we don’t need those buttons there go ahead to remove them so I did the work of removing them but guess what because I’m using this margin bottom concept I now have to go to this element and remove the margin bottom because there’s nothing below it anymore but then the clients like oh we need those buttons back okay why put the buttons back oh I can’t copy okay let me duplicate this one down here I don’t have hydrogen pack I guess I’m gonna move this up here so okay I put the buttons back but by putting the buttons back it’s forcing me to now go back to this element and add another margin bottom class and if again I choose the wrong one then it’s like okay well now I got to remove that and I got to like why am I doing all this extra work on this element when this is the element that I was just working with right margin top solves this so let’s go down here and take a look let me add another section so we’re not just at the total bottom of the thing here okay there we go so watch this now I decide well these two things need to be spaced out so the heading is the second thing that exists I’m gonna go margin top and that’s gonna be S and then here I’m gonna go margin top and that’s gonna be S as well and then here I’m gonna go margin top this is gonna be margin top in so I have the same exact spacing but what you’re gonna see is that these things are far less dependent on each other so if I decide that either the you know we’re working with first and last primarily the only thing that’s affected still is if you remove the first element on the page so if I you know took that first element away I do have to go remove the margin top here however everything beyond the first element if I can go backwards everything beyond the first element is not dependent on the elements around it so if I remove the last element right here there’s nothing else I have to do I don’t have to go to this and do anything to it right so let me put that back let me put that back there we go if I were to add something else like let’s add another line of text down here watch how efficient this becomes so in the old model let’s do the old model where I add text and now I have to I added text here but I have to click here and find the right area and then I had a margin bottom this and decide how much space there’s gonna be so that took like two steps whereas if I want to add something here I add text and I stay on this element and just add the proper margin top I didn’t have to go to another element and then if the client’s like oh no no we don’t need that okay cool I remove it and the margin goes away with it because the margin is attached to the element that I’m actually working with it’s not attached to another unrelated element or like an adjacent element that I didn’t even care about a minute ago so I’m feeling like this is so much more efficient to do the margin top thing now you could get the best of both worlds you could say well my first element is gonna get a margin bottom of s right and then this one doesn’t need a margin top everything else is gonna get a margin top so now if I remove my first element I don’t have to do any extra work and if I remove my last element I don’t have to do any extra work and then if I’m if I need to add anything in the middle here between all of these elements I don’t have to go to another element to adjust it I can just sit there on the element I just added and add the proper spacing to it and all as well in the world so if you add up the sum total of the clicks and the behaviors and the thinking that you’re having to do I feel like margin top is far more efficient this is obviously like you could do it either way this is just you know I’m exhausted and I wanted to put out a training and this is just something I’ve been thinking about for like the last couple months and it’s a reason why we built margin top classes into automatic that’s the SS I just feel like it’s more efficient what I want to know is if you agree with me like what camp are you in are you in the margin bottom camp are you in the margin top camp play around with it a little bit and I bet you’ll start getting annoyed here’s what I’m guessing you’re if you’re a margin bottom person you may not have realized the extra clicks and the hassle of like I add something so now I have to go back to this previous element and add margin bottom to it and then if I remove it then I got to go back to that previous element and remove the spacing you’re gonna start to get annoyed if you keep using margin bottom you are good let me go back to camera here okay if you keep using margin bottom you are gonna get annoyed and it’s I’m gonna pop into your brain you can be like dammit Kevin was right he was right we should be using margin top that’s it I don’t know it’s December it’s the end of the year I’m just putting out a training video for you I put some other little mini little things in there for everybody in case you’re not really concerned with the margin top first margin bottom debate but that’s it I’m going to have a nice weekend with Georgia absolutely smashing and crushing and grinding the Alabama Crimson tide into the dirt and I will see you guys again next week all right peace