Search code examples
cssblockmarginpadding

How to know when margin or padding should be used on block level elements?


Can someone give me some examples as to when padding or margin should be used on block level elements?

I know sometimes adding a bottom margin is ignored by the element beneath it. For example, if a p element has a bottom margin of 20px and I give another p beneath it a top margin of 20px, it doesn't move down any further than if it didn't have a top margin. Why is this? Should I mostly use padding instead?


Solution

  • That margin effect is known as "margin collapsing"

    Formal rules are here.

    In short: when you define margin on some element you declare minimum distance between border boxes of adjacent elements. Max value of two margins of adjacent elements is used for positioning such two layout siblings.