Understand box-model
What is box-model ? You know, when you create a tag, it's an element. Each element become a box. And this box have 4 main properties that you can modify.
If you create another box in the first box, the second one become a child and the first one is his parent.
And if you create another box inside the second box, this one is the grand-child of the first one you have created. Isn't that magic ?
There is something you must keep in your mind :
Everything in your whole webpage is a bunch of boxes that you can move, styling, sizing.
Demo
See bellow simple boxes, you can resize the blocks and see that when you move the size of one block, the other blocks move too :
Resize here ↘
Margin
Border
Padding
Content
Resize here ↘
Margin
Border
Padding
Content
Resize here ↘
Margin
Border
Padding
Content
You have to know that if you change a value, it can affect the position of other elements.
