Ryan Ho

What is the difference between Margin, Border, and Padding>

When you are learning HTML for the first time, it might get a little confusing to differentiate between Margin, Border and Padding. What do all these different concepts mean? What are their differences? Lets dive straight in!

Margin simply refers to the area around an element (outside the border). The margin does not have any background color, and it is transparent. Margin has four properties that you can change, namely margin-top, margin-right, margin-left, margin-bottom and margin-left. A shorthand margin property can also be used to change all margins at once.

Border simply refers an element's border, which you can specify according to style, size and color. The border-style property specifices what kind of border you want to display, with several styles such as dotted, dashed, solid, double and several others.

Padding is defined as the space between the element border and the element content. It clears an area around the content that is inside of the border of an element. Take note that the background color of the element will affect the padding. The padding property can be used to change the top, right, bottom and left padding independently. Similar to the margin property, the shorthand padding property can also be used to change all padding at once.

I hope that this gives you a good overview of the differences between Margin, Border and Padding. I hope you found this blog post useful, and stay tuned for more coding concepts to come! Subscribe to my blog for more juicy stuff coming soon.