デザイン作ってて気になった、というか引っかかりやすいCSSを書いて行こうと思います

とりあえず第一弾はheight:0の要素のmarginです 

高さ0のブロック要素にmarginを指定しても下側が無視されます


これは少し困りました

まず、高さ0なんてどこに使うのかってことですが、
hrのデザインで
height: 0; border: 0; box-shadow: 0 0 15px 2px magenta; margin: 50px 0;
とかすることがあります

hrなので上下にスペースが欲しいです

ですがheight:0;なので下marginが無視されます

実際のサンプル
下にhrがあります
上にhrがあります
hrと「上にhrがあります」のテキストが被っています

対策


対策は height:0;にしないことですが、今回だとheight:1px;でもあると見た目が変わってしまいます

なので対象の要素のafterに「height:1px;」とすれば下にもマージンが付きます

hr:after{ content: ''; display: block; height: 1px; }
下にhrがあります
上にhrがあります
これが正しい対策方法なのか自信ないですが、上が正しく表示できている内はこの方法が使えるはずです