What is the Difference Between Margin and Padding?

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is a space outside something, whereas padding is the space inside something. In very simple words margin takes the space from outside and padding takes inside of DIV. Margin and padding are very important properties to make a beautiful and flexible layout.

 

Padding:
The padding property allows you to specify how much space should appear between the content and DIV, the values can be in pixel or percentage. Through the Padding property, you will be able to change the default padding that appears inside HTML tags like paragraphs, headings, strong and tables.

CSS has properties for specifying the padding for each side of an element like padding-top, padding-bottom, padding-left, and padding-right.

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

Padding-top: 10px – 10px space will come from top side
padding-bottom: 10px – 10px space will come from bottom side
padding-right: 10px – It will take 10px space from right
padding-left: 10px – It will take 10px space from left

All four paddings can be specified on a single line using the padding property. The syntax is as follows:

padding:10px 10px 10px 10px;


Margin:
The CSS margin properties are used to create space around elements and outside of DIV. We can set the margin from any side like top, bottom and right. For example if we need 10px space before starting DIV then set the margin-top: 10px.

margin-top:10px;
margin-bottom:10px;
margin-right:10px;
margin-left:10px;

margin-top: 10px – 10px space will come from top side
margin-bottom: 10px – 10px space will come from bottom side
margin-right: 10px – It will take 10px space from right
margin-left: 10px – It will take 10px space from left

we can write in single line as below

margin:10px 10px 10px 10px;

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn Affiliate MarketingGet Free book of Affiliate Marketing, SEO Guide

Get Free PDF Book of Affiliate Marketing & SEO guide