Hello, in this CSS Crash Course video, we're going to be looking at margins and padding, both of which allow you to create space around your sort of content. So if you have a div and its width is usually a div is a block level element and cover the entire width of the parent element. Well, there are ways around it. So for this particular div that we have is 100 pixels by 100 pixels. Maybe it's just a solid color, we could add margin around it, maybe you want to do a full position, that's most likely what you would want it for. And if you add, let's say, a margin of 20 pixels on the bottom, the left the top on the right, it's just white, empty space.

And it's not part of the object necessarily itself. And what I mean by that is if the app let's say you Link is clickable, you will only be clickable within that. I mean, if that deal with clickable would only be clickable within the hundred by 100 pixels, it wouldn't be clickable in the extra margin area where the padding is, you can say with in the element. So if you do padding, and then you put a background on it, it would actually show the background in the padding area. And if it was clickable, the padding part will be clickable as well. So that's what margins and padding are the five different ways that we're going to be covering margin and then five different ways than it could be covering padding.

The five different ways are to apply margin or padding equally to all force in all four sides, or to do it individually. So first of all, what we're going to do is just create a what should you do? Okay, creating Good tech. And for this we're going to style equal margin colon 100 pixel actually know what, for what even do anything for the style. I'm just going to put in the margin, save that show you what that looks like. That's what that looks like at the moment or simple stuff.

And now in here, I'm going to put margin colon 100 pixels. Go back refresh. As you can see, the margin has now spread everything out. And if we right click it, inspect element. Let's resize this a bit. Go to the body.

So we've got the div right here. So this, the blue part is the actual just the call aspect, the core content then around it. In which we haven't applied any of his border, we will be covering border in a separate video, so don't worry, and then there is more margin. So this is the margin around it. So now, let's actually you know, I'm going to put a background color. So background color.

Let's see what yellow looks like. Okie dokie, what I'm gonna do is just change the color to black and submit this. So if I save that refresh, so you can see, the actual color itself is only within the content area that's the same with margin where you apply margin. Usually one value or you apply separately for the left, right top and bottom with padding. It does include the top showing you a second. So now what we're going to do is So we're going to put a couple of new line tags.

And we're going to put a span reason we're going to put a span gonna put two pieces of text by each other. So you can actually see the different individual margins working way to be a little hard to see because we're going to show you the margin left and something like the margin right. So now let's go on span. Now, let's inside the outlet foot, left margin. And for this tutorial, I'm going to put a margin left one on the pixels and for the black Yellow, I want to put red red should be black text. So there you go, we have this left margin as and if we go to our span tag, as you can see, there's only margin on the left nothing on the top or bottom.

So we have row margin has nothing to the right again, the way we're going to illustrate that is by pouring in other slang tags. And inside here, we're simply going to put extra text, we're not going to apply any styling to it, refresh, need to apply styling because a colorful style equals love one. Save that refresh, as you can see directly next to it. Now, we're going to be showing you the UI. Now, we're going to be showing you The span tag so we could just copy and paste this. change this to boit.

Change this to boy, save it, refresh. As you can see, even though this isn't moving on the left because they put margin on the right, it moved any contents to the right on that line, I should say. So moving this at the top. So if we go to here, right here, as you can see, the margin is only applied to the right and it's not. It's just literally on the next line below this one right here. Now, what we're going to do is cover the margin bottom, so I think you guessed it, it's going to put margin on the bottom.

So what we're going to do is copy and paste up, changes to active. The reason I want to change to a div lesson here for more than a quarter hundred pixels, changes to blue. bottom margin, we're gonna change this to a div. reason we're changing it to div id because we're applying the margin on the bottom. Now we now want the different piece of text on separate lines so you can see them affecting each other. And we'll save that look so good to me.

Refresh. As you can see, this has now pushed this piece of text to the bottom or a low low, it's no more than on the left, right or the top. It is purely on the bottom. There we go. So now what we're going to do is show you the top margin. So actually, copy and paste this or even delete this right here.

Margin, top background as color. For this, I'm just trying to play a different color. So green top, save that refresh. And as you can see, this has, it looks very similar to this. But if we were to put some extra text below so if you did actually copy and paste this, save it refresh as you can see directly below it simply because this has only applied a margin above it. So it's almost like pushing itself down.

And essentially, that's probably the best way to look at it. Well, that's it for margin but left, right, bottom and top, go to Scott, the one margin value which applies it just universally to all of them. Use in a separate CSS file when you can actually identify different elements uniquely and group them together, which we'll be covering later on is called classes and IDs. But when you can do that, you can override the margin. So if let's say you want several elements to have a margin of 100 pixels on everything, but then one of them you only want the margin left to be 90 pixels, you can easily do that. That's not a problem at all.

So now what we're going to be doing is showing you padding and you know what I think we may just be able to copy and paste this and literally just change the margin to padding I think that should illustrate or try and teach you so fully change this to padding. Then padding, padding, padding, now we need to change this to And then probably gonna have to redo it anyway. So that now let's refresh. There you go. It's worked literally the way we wanted it. And in terms of the extra text and ignore the colors, everything.

The bottom part is positioned the same way at the top. But the difference is, as you can see, if the padding is fine, the padding on this one right here, no margin, or padding is with in the element itself within the border. That's the best way to think of it. Because within the border, it's like part of the element. If it's outside the border, it's like saying, Yeah, I'm pushing you away, but you're not part of me either. And that's the same case for all of the different padding.

So yeah, that's it for margins and padding. You are going to be using this a lot trust me to position stuff. This will be one of the main features that you use and yeah that is it. If you have any questions feel free to post them on our education platform sonar learning Dakota UK your messages here. There will be a link to all the source code from this video and source code from every other video. If you've liked this video, are you doing okay?

Please let us know as well, because we accept all types of feedback. And as usual, thank you for watching and I hope you have a great day.