Difference between Margin, Border and Padding in CSS

The aim of this post is to hopefully help clarify the fundamental differences between Margin, Border and Padding for you. While surfing web pages, you might have noticed that some pages have spaces between a picture and the content, or a colored-border image. These visual presentations are achieved by applying CSS properties of margin, border and padding.

Comparison between Margin, Border and Padding





What is Padding ?

Padding is the space that separates the content from the border. To apply padding for an element, you simply need to write "padding" in your code. Padding can also be declared separately for four sides including top, right, bottom and left. Two pieces of code below are examples of how to use padding in CSS.

div {
width: 30px;
height: 50px;
padding: 20px; }

div {
padding-top: 100px;
padding-right: 200px;
padding-bottom: 50px;
padding-top: 250px; }


What is Border ?

Border is the area that surrounds the padding of the content and it sits between the padding and the margin. According to CSS's rule, an element seems to have no border due to its zero border width by default. Border's width, however, can be adjusted by setting a specific value, and the same also applies to other border's properties, namely style and color.



What is Margin ?

Margin is the space outside the border that separates one element from another. Similar to padding, margin can be implemented by adding the term "margin" along with a certain value or it can be specified for each side using margin-top, margin-right, margin-bottom and margin-left properties.