Margin property using which we can create space around the elements. We can also create space for borders defined at the exteriors. We have the following properties for DEFINING the margin:

• margin-top
• margin-right
• margin-bottom
• margin-left
  margin property by itself has the values as:
• auto – The browser auto-calculates the margin while we use this.
• length – The value of this property can be in px, pt, cm, EM etc. The values can be positive or negative.
• % – We can also give PERCENTAGE value as margin to the element.
• inherit – Using this property, the margin properties can be inherited from the parent elements.

The padding property is used for generating the space around the element’s CONTENT and inside any known border. The padding also has sub-properties like:

• padding-top
• padding-right
• padding-bottom
• padding-left

It is to be noted that the padding does not ALLOW negative values.

From the below image, we can see that the Margin is the outermost entity of the CSS Box Model that lies outside of the borders whereas the padding lies within the borders.