Padding and the margin.

There is always been a confusion between the two for the new learner.

But when you know the difference between them they can help a lot in designing.

Both of them provide the same white space between the element that causes the confusion.

But there is a huge difference between them.

Padding is what we usually give inside the element.

ex

--------------------------------------------(div)    4px padding

  ---------------------------------------(span)


  ---------------------------------------(/span)

--------------------------------------------(/div)

In this block we apply a padding of 4px on the div and padding is applied inside the element.

Margin is what we give outside the element

ex

------------------------------------------------(div)


    -----------------------------------------(div2)    margin of 4px

    -----------------------------------------(/div2)


------------------------------------------------(/div)

Here we applied margin of 4px on the div2 and it is applied outside the element.