What is the difference between Margin, Border, and Padding?

Margin

The space outside the given element. E.g. You make a box element, and give it "margin: 10px;", this would create a border/forcefeild of sorts of 10px, deviding your box element, from other adjacent elements. You would use the properties: margin-top, margin-right, margin-bottom, and margin-left to set the desired margin values.

Border

The border is essentially the visible edge, or perimeter of a given element. Borders can be given different styles, colors and widths to acheive te coders vision. Border properties look like: border-width, border-color, and border-style.

Padding

Padding is like the margin, only instead of creating a space between the element and other external elements, padding creates a space between the border of the element, and the contents inside of it. this could be text, images, anything inside the element. the properties for Padding is very similar to margin's properties, looking like: padding-top, padding-right, padding-bottom, and padding-left.

Summary

In summary, the margin is in charge of the space between the element and other elements, the border is in charge of an elements visible edge or perimeter, and the padding is in charge of the space between the elements border and the content.