So how do we tell the difference between these three? To aid our understanding, behold, the box model:
If we take a look at the model, in the middle we see content. This one speaks for itself. Content is where our text , like paragraphs, or images appear.
The next one out is padding. This is the area between our content and our border. It literally “pads” the area around the content so the content doesn’t reach the border (that is, if the padding isn’t equal to zero.
Next, we have the border. In the above image, it is represented by a thick, lime green line. This is exactly what you would think of when you hear the word “border.” It outlines the padding. There are a lot of things you can do with the border. For example, you could make the border small (1px), big (10px), dahsed, solid, different colors, etc.
Then on the outside, we have the margin. This is the space that is between the border this element from those around it.
We can think of this kind of like a framed photograph. The content is the actual photograph. This could also be framed text, like song lyrics or a quote. Surrounding the photo is the matting. This matting aroung the photo is the padding. Of course, we don’t always need matting to display a photo, and just like that, we can set the padding to zero, and the border, or frame, will touch the content, or photo. Borders and margins may also be set to zero if we don’t wish to use them. So the border, in this analogy, is the frame, and so what would the margin be then? Well, think about a row of three framed pictures hanging in a horizontal or vertical line on a wall. How do they look? Usually, they are a few inches apart so that the frames do not touch. That space in between the frames is the margin. It keeps the elements, the framed photos, from touching.
I hope this helped you understand margins, borders, and padding a little better!