This is what was written for the orange box:
And this is what was written for the green box:
Each HTML element essentially comprises a rectangle of space. The padding, border, and margin are the properties that control the space that surrounds each HTML element.
The border of an HTML element is basically a line that follows the perimeter of the HTML element, like a fence.
The padding of an HTML element controls the amount of space that is between the element’s border and its content. The more padding there is, the more distance there is in between the content of the element and the border.
In the illustration below, you can see that the green box has more padding than the orange box because there is more distance between the text in the middle of the green box and the green box’s border than there is for the orange box.
This is what was written for the orange box:
And this is what was written for the green box:
The margin of an HTML element controls the amount of space between that element’s border and the surrounding elements. When the margin is increased, the space between the element’s border and its surrounding elements is correspondingly increased.
In the illustration below, the green box and orange box are both contained inside a grey box. Because the green box has a bigger margin than the orange box, there is more space between the green box and the grey box than there is between the orange box and the grey box.
This is what was written for the orange box:
And this is what was written for the green box:
As you can see, increasing the margin can make the element look smaller. To make the element look larger, the element’s margin can be set to a negative value, such as -40px, as demonstrated with the green box like so:
Hope this explanation was clear!