Margins make up the vertical and horizontal areas between elements. Also if there were no margin that is set, they would just be placed right up against each other. (Some elements already have default margins; if you don't have a margin specified already the default would be inputted). (see image below)

Border is the visual separator between the margin that is located on the outside. It can be styled in different ways from dashed, solid, dotted, etc. (see image below)

Padding is the space between the content and the border. Unlike margin, which inherits the background color properties, the padding uses the background-color specified for whatever it is padding. (see image below)