Let's quickly round up with the third thing, the Margin. The margin is the area outside the border and outside the padding. It's the area that basically surrounds the entire element.
Let's add some paragraphs
Like this 👇
We should probably add a background color to our paragraphs, so... Add this 👇
Now we have a header, and two different paragraphs. But let's forget the header right now. We have two paragraphs and in between these two paragraphs we have a space of about 15pixels by default. So, by default paragraphs have margin in between them, but let's say we want to tighten it up because the margin is too much. In other to do this, we need to play with a property called margin. Remember I said margin are the spaces around each of these 2 paragraphs.
Just like the padding, we can as well do this in two ways, we can either change the overall or change it individually.
Let's try to tighten up our paragraphs to 1px, if we specify that in our CSS like this 👇
Now we have a tiny space between our paragraphs. That's the work of margin. You can decide to give it 0px which will seems like a line break or increase it to 10 which I think it's the default.
But if you increase above the default value (10px or more)
Like this 👇
When you add 40pixels, each of your paragraphs now have 40px surrounding it, but what I want you to notice is that the padding does not change, I mean the padding in the border, the padding and the border stay constant, it's only the margin that is changing so.. That's the different between the padding and the margin. A lot of people get confused, just remember that;
Padding is the space inside the border
Margin is the space outside the border and that's how you can ahead of others because they are busy studying behind the scene instead of contributing to my tutorials, bunch of cowards.
And like I said before, you can also change;
margin-top
margin-bottom
margin-right
margin-left
And all these 3 properties are what we referred to as CSS 'Box modules'
This is a very long tutorial, in other to get it right and stick to your brain, play with these 3 properties as I say bye for now, see you in the next tutorial.
Stay safe, stay out of trouble and play safe. Peace out, I love y'all😘
