高さ0のブロック要素のmargin
デザイン作ってて気になった、というか引っかかりやすいCSSを書いて行こうと思います
とりあえず第一弾はheight:0の要素のmarginです
とりあえず第一弾はheight:0の要素のmarginです
高さ0のブロック要素にmarginを指定しても下側が無視されます
これは少し困りました
まず、高さ0なんてどこに使うのかってことですが、
hrのデザインで
hrなので上下にスペースが欲しいです
ですがheight:0;なので下marginが無視されます
実際のサンプル
対策は height:0;にしないことですが、今回だとheight:1px;でもあると見た目が変わってしまいます
なので対象の要素のafterに「height:1px;」とすれば下にもマージンが付きます
これは少し困りました
まず、高さ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があります