The Difference Between Margin and Padding in CSS

What is Margin or Padding ?

Margin

Margin is the space outside the HTML element border . It is used in separate the of one to another . It is make a design good looking and attractive of webpage it is make a space outside the border in present is mostly use margin in make a webpage. Margin are used inline CSS, Internal CSS, and external CSS. Margin value are write in pixel like I need 20px margin : margin: 20px;

Example

Margin are four types:-

1. Margin top
2. Margin bottom
3. Margin left
4. margin right

Example

Shorthand property

It support shorthand property no need for write the all side in margin property only write the margin value

How to use shorthand property

1. Margin: 20px; :- This property are gave all side margin
2. Margin: 10px 20px; This property work 10px margin top or bottom and 20px left and write
3. Margin: 20px 10px 15px 20px; This property work 20px margin top ,10px bottom ,15px left, 20px right margin

Padding

Get Bharatnetsquare’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Padding is the space of content or border. It used inside the border It making the webpage good looking and attractive padding is same as margin but margin give space outside the border padding gave inside the border. It used mostly created a webpage. Padding support Inline CSS, Internal CSS, External CSS. Padding give value in pixel.

Example:-

Padding are four type:-

1. Padding top
2. Padding bottom
3. Padding left
4. Padding right

Example:-

Shorthand property

Padding support shorthand property. It helps the developer save time and no write the all side of padding developer almost use shorthand property

How to use :-

1. Padding: 20px; This property work all side space around of content.
2. Padding: 10px 20px; This property work top or bottom 10px space around the content and 20px are space in left or right of the content
3. Padding: 10px 20px 30px 25px; This property work topnof content 10px space and 20px space bottom of content left side 30px space and riggt side 25px space of the content.

Different between margin or Padding

1. Margin are space outside the border but padding is space inside the border.
2. Margin cannot effect the background color but Padding are effects because into extend background Color.
3. Margin are spacing between element but Padding are spacing between border and content.
4. Margin can be use negative value support but padding cannot support negative value ( for overlapping effects)
5. Margin can be set auto but Padding cannot set auto.