As you might be aware of the fact that CSS is used to style the structure which is provided by HTMl. But how does it actually styles. We don't style entire HTML at once. We take piece of elements and design them separately. Every HTML element like heading,image,butons etc is surrounded by a box and this box is also divided into four parts, Let's talk about them now :
Content area is the actual area occupied the content such as image,text,links. You can think it as the area your body is occupying in the room. You can make changes in the content area by "width", "min-width", "max-width", "height", "min-height", and "max-height" properties.
Next to the content area comes Padding area which acts as blanket to the content. Padding area can be increased and decreased accordingly by the help of "padding-top", "padding-bottom", "padding-right", "padding-left" and simply by "padding" properties
In real life border is just a line defining the territory or you can notice the border around your images. The CSS border is similar to that. You can define border area properties like "border-radius", "border" properties.
"the empty space at the side of a page in a book, etc". This is the meaning I found on google and yes Margin Area is like this only, being the outermost area this empty space is used to separate two different elements. You can define marigin area by "margin-top", "margin-bottom", "margin-right", "margin-left", and simply by "margin" properties