Introduction

I had issues understanding the difference between padding and margin but since i did more research i decided to share my knowledge with you in this article.

Padding and margin are two style elements that allow you to give space in html element.

Image source:codeproject.com/Articles/227840/CSS-Basics-..

Difference between padding and margin

Padding and margin are totally different although, they both give space to the element and content but in different ways.

Image source:codemahal.com/video/the-box-model-and-padding

Padding

Padding in css is the inner portion of the box model that creates space around an element's content.

Padding has four properties:

• Padding top : Creates space at the top of the elements content.
• Padding bottom : Creates space at the bottom of the elements content.
• Padding left : Creates space at the left part of the elements content.
• Padding right : Creates space at the right part of the elements content.

Padding values

There are four values in padding are:

Single Values: Padding with a single value creates space around the elements content.

 button{
    padding: 10px;
}

• 10px : Top Bottom Left Right

Double Values: Padding with double values creates space on two sides each of the elements content.

button{
    padding: 5px 10px;
}

• 5px : Top and Bottom
• 10px : Left and Right

Three Values: Padding with four values creates space on the four sides with three values on the elements content.

button{
   padding: 2px 5px 10px;
}

• 2px : Top
• 5px : Left and Right
• 10px : Bottom

Four values: Padding with four values creates space on the four sides of an elements content.

button{
   padding : 2px 5px 10px 15px;
}

• 2px: Top
• 5px: Right
• 10px: Bottom
• 15px: Left

Margin

Margin in css is the outer portion of a box model creating space around an elements outside of a defined border

Margin has four properties:

• Margin top : Creates space at the top of the element.
• Margin bottom : Creates space at the bottom of the element.
• Margin left : Creates space at the left part of the element.
• Margin right : Creates space at the right part of the element.

Margin values

There are four main values in margin they are:

Single values: Margin with single values can be applied to create space on the four sides of an element.

p{
 margin: 5px; 
}

• 5px Top Bottom Left Right

Margin auto: Margin auto centers block elements horizontally.

p{
 margin: 0px auto;
}

• 0px Top and Bottom

• auto Left and Right

Double values: Margin with double values can be applied to create space on two sides each of the four sides of an element.

p{
margin: 5px 10px; 
}

• 5px : Top and Bottom

• 10px : Left and Right

Three values: Margin with three values is applied to create space on three sides of the for sides of an element.

p{ 
  margin: 5px 10px 15px;
}

• 5px : Top;

• 10px : Left and Right;

• 15px : Bottom;

Four values: Margin with four values is applied to create space on the four sides of an element.

p{
  margin: 5px 10px  15px 20px
}

• 5px : Top

• 10px : Left

• 15px : Bottom

• 20px : Right

Conclusions

I think with this, we've understood the difference between padding and margin. We've understood that padding creates space on the elements content while margin creates space around the element.