Let's finish up with the box model concepts by talking about what is called margin.
So what is margin property when it comes to box model?
So margin property are space between a box and the contents of the next element.
So it simply means that it's a space between children or two or more children that is around a particular
element.
So if we see that, how many elements do we have on this particular page?
Can you tell me?
We have what is called.
The first one is here with the eighth one where com.
And this text number two and the whole of this one.
Number three and I have this pan number four and we have this one as number five.
And we see that for the element number three, which is this one, there is no space here.
So the spacing between this child and then the next child is what you call the margin.
We see that the mind, the surrounding contents of an element is called the margin.
So let's say I want to have some margin around between this particular child and this particular child
and apply margin on this particular child.
The same thing on this pan is that for this PAN, we don't have margin around that.
So let's see how we can apply margin also.
So margin also has four properties, margin top, bottom left or right.
So let's see.
So let's add a margin to the first one, each one here, which is this one, my h one here, this.
So come up here, this is my h one here.
So I will select that then having selected and C margin.
Of, say, 20 paychecks.
And we see that as soon as I add that I have a margin around that, but I don't want to have a margin
on all on all sides.
See that at the top here.
I want to add a margin.
You see that as soon as I add margin, I have some space at the top.
Left, bottom and right.
I don't want that.
What about if I want to have margin at the top, then specify as margin.
Bottom sorry, margin bottom.
What is if I save it now?
See that now I have margin.
That is between this particular element, this child and this particular tag here.
Now, perfect.
So you would have some margin to to decide why not we can do that using margin.
Margin left and error margin left.
And then going to be as ten parsecs now half margin.
What about this particular I mean, particular dip here?
That is a border.
The dip this might dip here so I can come down here and say.
Margin we see for one element we can add as many states property that we want.
I can say margin on all the sides is supposed to be 20 parsecs.
Now I have enough margin.
I want this one perfectly aligned.
What about my span here?
Okay, so for this pan to I can come down here now have my span been selected or is my span here?
I can.
I had also margin on all sides to be 20 parsecs.
Now I have it.
Okay.
I have that one.
That is it.
So that's the beauty of margin.
Margin, the space between a child and a nervous child.
And putting it within the child.
But the space between the border and the content and the way it specified the horizontal and vertical
sizes of a box, that is it about box model.
So with this concept in mind, the next video let's improve our skills by learning what is called CSS
selectors.