-3

Padding

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

Marging

margin-top
margin-right
margin-bottom
margin-left

Both are creating spaces... What is the actual difference between the following two sentences?

  1. The CSS padding properties are used to generate space around content.
  2. The CSS margin properties are used to generate space around elements.
Peter Mortensen
  • 28,342
  • 21
  • 95
  • 123
Rahul Bhawar
  • 440
  • 6
  • 17
  • exactly... margin is used when you need to get space between the elements and padding is used to get space within the element... both are different in many ways – RRR Feb 25 '16 at 07:03
  • simply margin for outside the div , padding for inside the div – mohade Feb 25 '16 at 07:04
  • Hope this fiddle helps you to understand the difference... https://jsfiddle.net/nzu7y37g/ – RRR Feb 25 '16 at 07:12

2 Answers2

7

In short padding make "space" inside your box, and margin do this outside of your box.

This picture explain it pretty good :)

enter image description here

Cœur
  • 32,421
  • 21
  • 173
  • 232
Patrick Knudsen
  • 279
  • 1
  • 3
  • 11
2

The simple way to look at it is that padding is internal to the border of the content (pad from the inner edge of the line), and margins are external to the border of the content (pad from the outside edge of the line).

Add a border to your content pane in 5px solid black and see the difference in text and border positioning on the page as you change the padding and margin values.

Simon David Kelly
  • 239
  • 1
  • 3