What is the difference between the margin, padding, and borders in CSS?

Answer 1

This is a great question and it all ties into what we call the box model. Every element in HTML is what we consider a box. This box consists of 4 main properties: content, padding, border, and margin. Regardless of what element you put on your web page, it will always have these 4 properties. I highly recommend checking out this concept as it is essential to any web developer.

Getting to your question:

1. Padding: The space between the border and the content of your html element
2. Border: The line that surrounds your html element.
3. Margin: The space between one html element and the next

If this isn't that clear, I also recommend using Google Chrome's developer tools (Ctrl + Shift + i) and looking at the box model in the styles section of the dev tools. Firefox also has this feature.