What does border, padding and margin mean?

I have seen the skill path and I do not get what they are still after reading it. Can someone help me please? Here is the course. By the way I am new so can someone tell me if this is the right place to ask questions? Thanks, coder7960.

Take a look at this chart
image

Padding changes how much room is in-between content, and the margin changes how far away from content is from the edge of the browser.

You can view what border does here: border - CSS: Cascading Style Sheets | MDN

1 Like

What does the border mean?

This is absolutely the right place! So those are all part of the box model and define spacing around an element. While @ethanmasterprogram is absolutely right, I’d just like to expand on what he said slightly:

Margin is the empty whitespace between the element and any nearby elements.

Padding is the area inside of an element, between the actual element content and the element’s border.

Border is just the (usually pretty thin) bit around an element.

Let’s take this as an example:
image
In this example margin is the empty space between the two buttons.
Border is the red line around each of the buttons.
Padding is the space between the button’s text and the red border of the button.

2 Likes

edited my original post to add the documentation for borders.

Oh this makes much more sense now! Thanks a lot :slight_smile:

1 Like

Ok thanks a lot. Really helpful!

1 Like

No problem! Combined border, margin and padding refer to something called the CSS box model, it’s a really useful and important tool that I’ll link a couple good articles on below if you wanted to take a read :smiley:

1 Like

Thanks a lot! Also do you how I can change my forum username?

I belive it’s linked to your username on the main Codecademy site but I’m not entirely sure :thinking:

2 Likes

Oh it suddenly decided to work. Thanks

1 Like