Margin and Padding Practical Differences

Question

I read articles about Margin and padding. I understood that "Margin is space outside the border where as padding is used inside the border".

Below is the Box Model that explains about it. My Query is regarding application of this information.

While designing website, I am not using borders anywhere. It means, I use margin and padding to resolve the same problem. So, In this situation. How should I chose, whether do I use margin or padding. Are there any dependencies with anyone ?

So, When border is invisible, How margin and padding can be used for different purposes. Can anyone explain different situations where we need to use only one and not the other.

Answer 1

If you know for certain that you will never ever have borders on anything, then you could user either margin or padding to create space around your elements.

The key thing to be aware of though is that, if you use only padding, the outermost edges of an element will always be touching other element(s).

This means that if you use techniques to change the position of elements slightly, eg. relative positioning, floating, negative margins etc. the elements may actually overlap.

It will be even more obvious when your elements have different background colors.

I would recommend using margin and padding both. Margin to create the actual space between elements, and padding when you need to create space from the edge of the element itself.

Answer 2

even if youre not using any border, but margin and padding is different, you can see this article, try using background-color