Margin

The CSS Box model's outer portion is the margin. It separates the entire boxe from the parent element.
Values it accepts include pixel values (10px), percentage values (10%), and 'em' values (2em). 'em' is a value which adjusts size relative to the font size.

Border

The border comes right after the margin, and wraps the box element.
It accepts the same values as the margin, but with borders, you can stylize the shape of the box. As an example, border-radius gives the box a softer edge, and the higher the value, the more circular the border becomes.

Padding

Padding is the inner layer that separates the content from the border.
Padding accepts the same value as Margin as well.

A note on syntax

For these values, there a different methods of input.
For example:
margin: 100px; would equate to a margin of 100 pixels on all sides.
margin: 100px 50px; would equate to a margin of 100 pixels at the top and bottom, and 50 pixels on the sides (left and right)
margin: 100px 50px 100px 50px; equates to the same as the above, but it separates the values as top, right, bottom, left.

Visual Representation