Actually I am novice in web developer and have a confusion with padding and margins. So tell me that What is exactly difference between padding and margins? Thanks in advance
Think of a box (or table cell or div). Outside the cell are margins, inside the cell is padding. Margins can be in negatives (margin: -10px) where as padding is kept positive. Using negative margins, you can tweak your designs to move to places they don't normally want to go.
In addition to xiras comment, it is worth mentioning that padding - since it is inside the box - will add to the box width and/or height. If you for example set a box width to 200px and height to 100px, and after that you set padding to 10px for all sides, this will add 10px to the width and height of the box for all sides. So, the box will be 200px + 10px padding left + 10px padding right = 220px wide And 100px height + 10px padding top + 10px padding bottom = 120px in height. This is good to know, becuse if you need the box to be EXACTLY 200px wide and 100px high, and you still needed that 10 px padding all around, you would have to calculate the padding as part of the width and height. So out of a total of 200px width, you distribute 180px to the width value, and 10 on each side to the padding, as the sum of all 3 will make up the total of 200px. This is one of them things that can drive you crazy, but once you know it, it's never a problem.
In simple words margin is the distance outside of the box and padding is the distance inside of the box... You can read more and also try the code in w3schools.com...
I do agree with you. I would like to elaborate this thing at some extent more If one wants more description: Padding is the space provided inside the border, between the border and on the actual image or cell content. In the image, the colour of padding area is yellow at all. Margins are the spaces outside the border, between the border and the other elements next to this object. In the image, The margin is the red area outside the entire object.