Margin, Border and Padding

When you're creating a website using html and css, you will need to know a bit about the difference between margin, border and padding.

Content

First, let's start with the content. The content could be a paragraph with text, a photo, a list of things or a table. It's anything you want to display on your webpage that would need to be positioned.

Padding

Immediately outside of the content is padding. I imagine padding to be sort of like airbags in a car. When they inflate, the padding will push in towards the car, but the car is the same size (well, let's pretend we're in an airbag test lab since it's morbid to think of airbags inflating due to an accident).

Similarly, padding will not stretch outside of the container or the margin (which we will talk about in a bit), but will more so push your content inwards and make it smaller.

Border

Immediately outside of your padding is yourborder. Remember adding a border to the front page of your 20-page research paper that you wrote in high school or college, just to make it look nice? Or maybe framing a photo? The border is just like it sounds, a border around your container. It can be as simple as a solid black line, or dotted. It can be thick or thin and have lots of different colors. You can choose to go without it too!

Margin

We finally come to the outer-most margin, which basically does the opposite of padding. The margin is like the bumpers on the outside of your go-cart at the local theme park. It pushes things outwards, so if you have other containers with pictures or text, the margin will affect the positioning of those things, depending on how you have your sections set up.