Have you heard the term box model before?

If you did, then good job but if not let's talk about it.

Briefly, A box model is similar to a box that contains a bunch of stuff inside of it and these stuff are ?
1- Content
2- Padding
3- Border
4- Margin

This will help you visualize the whole concept a bit

Okay, great! let's know more?

Content:
It's basically the information inside the box, like for example
if we have a code like this

<p> Hello World </p>

So, the content here is gonna be hello world

Padding:
It's the space around the content

Border:
it lays between the margin and the padding, basically plays the middle man between them

Margin:
The big boy, if we have 2 div stick to each other and you want to separate them then margin is the one to call here why?
because margin controls the outer space of boxes, the outer space around the box to be exact.

As you can see, it's easy just read this stuff but in fact it's one of the most challenging things you have to face while learning CSS.

Have a great day everyone and thank you <3