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?
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.