Margin, Border, Padding... What's that?

Well to answer that question lets say you have a few photos that you are hanging on a wall.
Each photo is covered by a material that puts space between the photo and the frame.
That space would be the padding.

The frame that surrounds the photo. That would be the border.

Each picture has a set space around the outside. This would be our margin.

If two pictures are handing side by side with about 10cm between them, then we might say that they each have a 5cm margin.

Below is an image that depicts the Box Model.


The CSS Box Model is used to create a definition for the way the HTML elements (or our "photos") are arranged on the screen.