コーディングをしている際、marginが意図していない結果になる時があります。特に上下のmarginです。
一つは、marginの相殺です。特定の条件下で隣接する上下のマージンが重なっている場合、相殺されて、大きい方のmarginが優先されます。例えば、上の要素のmargin-bottomが20px,下の要素のmargin-topが30pxを指定した場合、上下の要素のmarginが20px + 30pxで50pxになるかと思いきや、そうはなりません。大きいの方のmargin 30pxが優先されますので、間のmarginは30pxになります。これを理解していないと思うような結果になりません。marginは少し注意が必要です。