In CSS, the two properties that makes spacing possible are padding and margin.

• The padding represents the inner space of an element
• The margin is external

Explanation of the different parts:

Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent

Difference between margin and padding.

• Margin is outer space of an element, while Padding is inner space of an element.
• Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.
• Margin can be value auto: margin: auto, but you can’t give Padding the value of auto.
• Margin can give value of positive or negative (or zero), otherwise, Padding must be positive (or zero).
• In navigation bars or anchors (links) and other tags, Padding is a part of element that accepts changes. When you style an element, changes not occurs to Margin, but the space that Padding has created will be change.

Tips: You can see these differences on some tags that you use to control other tags; like div and span, or section and article

Padding Property:

• The CSS padding properties define the space between the element border and the element content.

You can define the padding value the following way:

• padding-top: 10px;
• padding-right: 10px;
• padding-bottom: 10px;
• padding-left: 10px;

You can also use the shortand property:

padding:30px 55px 80px 110px;

• top padding is 30px
• right padding is 55px
• bottom padding is 80px
• left padding is 110px

padding:30px 55px 80px;

• top padding is 30px
• right and left paddings are 55px
• bottom padding is 80px

padding:30px 55px;

• top and bottom paddings are 30px
• right and left paddings are 55px

padding:25px;

• all four paddings are 25px

Padding example program:

<style type="text/css">
div.wiki
{
width:200px;
border-style: solid;
border-width:thin;
border-color:#000;
padding:30px 20px 10px 25px;
}
</style>
<div class=“wiki">
Welcome to Wikitechy..
</div>

margin Property:

• CSS margin properties define the space around elements.
• The margin clears an area around an element (outside the border).
• The margin does not have a background color, and is completely transparent.

You can define the element margin values the following way:

• margin-top:100px;
• margin-bottom:100px;
• margin-right:50px;
• margin-left:50px;

You can also use the shortand property:

margin:35px 60px 85px 110px;

top margin is 35px
right margin is 60px
bottom margin is 85px
left margin is 110px

margin:35px 60px 85px;
top margin is 35px
right and left margins are 60px
bottom margin is 85px

margin:35px 60px;
top and bottom margins are 35px
right and left margins are 60px

margin:25px;
all four margins are 25px

Margin Example Program:

<style type="text/css">
div.wiki
  {
      width:200px;
      border-style: solid;
      border-width:thin;
      border-color:#000;
     margin:30px 20px 10px 25px;
  }
</style>
<div class=“wiki">
	 Welcome to Wikitechy..
</div>