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

what's up everybody welcome back to the channel i gotta tell you i am i'm smoked uh we we went like a two month sprint to get automatic.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 uh over 1325 sales of automatic.css uh 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 1320 over 1325. um so that is just absolutely phenomenal and it proves that automatic.css is absolutely here to stay and we are we are now poised we are going to be i'll just let you know i'll put you on notice we are taking over uh 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 going to tell you why i recently switched from the margin bottom camp to the margin top camp we're going to talk about it we're going to take a look at an example i also do want to say uh 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 gotta tell you i've got so much stuff planned for the inner circle in 2022 things are going to get so more interactive um 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 freelancer 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 assets that you are giving us access to i'm closing more deals i'm closing deals at double the price triple the price as uh what i was doing before i'm getting clients to pre-pay for their projects i'm not chasing payments anymore like just 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 like for twenty dollars a month it's the 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 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 uh 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 wanna i wanna i wanna uh but at the same time there's only so much time in a day and there's only so much energy in 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 gotta pace myself and we are gonna 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 and new year and all of that but i just want to take a minute to thank all of you for your support everybody who subscribes 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.css just thank you i'm really honored i'm really excited uh 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 uh 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 um firefox a lot more lately and i'm really you know i'm noticing a huge speed difference over brave uh 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 uh 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 mini 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 going to 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 building so i'm going to add a section and we are going to add a i'm going to add a div and this is going to be a grid we're not going to put anything on the right side of the grid but then we're going to 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 too i suppose so let's do grid auto two 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 going to add a text we're going to add a heading we're going to add more text and then we're going to add a div for a button wrapper all right and then this is going to have inside of that div a button and we're going to 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 going to say fastest delivery service that's going to be this fastest delivery service and i'm going to 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 going to say we are ready to deliver your goods perfect and then we're going to add i 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 sorry great fantastic i'm just gonna capitalize that none of this matters okay and then i'm going to grab this little button wrapper so i'm grabbing the wrapper around the two buttons and i'm going to do a grid of two on this and then i'm going to do a grid of auto or i'm not a grid 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 going to add our text so find location and need help so find location and that should really say okay like oh i 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.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 um the way that we would do that just because this is obviously much bigger text this is already an h1 so we're just going to override the h1 size in automatic so i'm going to 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 going to go it's okay i'm going to go to typography we're going to scroll down to the xxl overrides and i'm gonna do 3.2 and we're going to 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 uh oh before i give you the goods let's do one more styling thing so we're going to call this h accent and we're going to style it like uh our example right here so fastest delivery service and that looks like it's going to be a primary color so h accent we're going to use a variable so we're going to go var primary and it's going to make that our primary color and then i'm going to add that little dash to it so the way we're going to do that is go to layout flex and then we're going to go to the before and we are going to display that flex as well we're going to go to size and spacing the height is going to be 2 pixels the width is going to be 2m and let's see the background is going to be var primary and then we're going to need to go to our main h accent we're going to go back to layout and we're going to say this is going to 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 dashed line and we need to add a little margin to the right of it maybe like .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 going to duplicate this so that we can do it twice and i'm going to 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 m as well uh 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 um 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'm 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 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 oh 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 because i don't want to delete them but i remove them because the client's like oh we don't need those buttons there go ahead and 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 client's like oh we knew those buttons back okay well i 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 gotta remove that and i gotta 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 uh 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 going to go margin top and that's going to be s and then here i'm going to go margin top and that's going to be s as well and then here i'm going to go margin top this is going to be margin top m so i have the same exact spacing but what you're going to 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 um if i were to um 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 have margin bottom this and decide how much space there's going to 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 going to get a margin bottom of s right and then this one doesn't need a margin top everything else is going to 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 uh 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.css um 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 i bet you'll start getting annoyed here's what i'm 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 going to start to get annoyed if you keep using margin bottom you are let me go back to camera here okay if you keep using margin bottom you are going to get annoyed and it's i'm going to pop into your brain you're gonna be like damn it 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 uh 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 alright peace

Channel: Digital Ambition

Views: 1,333

Keywords:

Id: BMl4iUPUng4

Length: 20min 53sec (1253 seconds)

Published: Fri Dec 03 2021