The most common and confused elements of the css.
Border: As the name suggest it is the border around your element. If the border has 0 width, the border edge is the same as the padding edge and invisible.
Padding: Defines the space between border and element content. If the padding has 0 width, the padding edge is the same as the content edge. This means that your content will stick to the edge of your defined content box.
Margin: Defines the space between border (if you don't have a border then padding, and if you don't have a padding then content) and other surrounding elements. If the margin has 0 width, the margin edge is the same as the border edge(if you don't have a border then padding, and if you don't have a padding then content).
Each edge of margin, padding and border may be broken down into a top, right, bottom, and left edge. (for ex: padding-right: , margin-left: , border-bottom: etc.)
The image below may give you a better understanding.
.................................................................................................................................