はじめに
たとえばエラーメッセージの表示だったり、何か値を渡されたときには表示して、それ以外のときには非表示にしたい、という場合にpaddingつけようとして困ったよという話。
中身が空のdivにpaddingをつけると
中身があるときは下のように表示してほしいとします。
See the Pen
qBNdVem by taka1473 (@taka1473)
on CodePen.
このとき、p要素の中身がないとどうなるか。
See the Pen
ExyjoXX by taka1473 (@taka1473)
on CodePen.
こうなります。
要素の正味の部分（文字とかが表示される部分）というのはheightからpaddingの高さを引いた数字になるが、heightは負の値を取れないのでpaddingのぶん正味の部分が高くなる（？）、ということらしいです。
回避方法
1.div要素を親要素に追加して、そちらにpaddingをつける。
See the Pen ZEOGvvB by taka1473 (@taka1473) on CodePen.
これで要素がない時には非表示にできます。でもこれだとpaddingのところはpinkになりませんね。
2.子要素で無理やり
See the Pen GRqJyQz by taka1473 (@taka1473) on CodePen.
そもそも要素がないのでそこにpadding入れても効かないから大丈夫っていう考え方。
See the Pen
vYKOpzv by taka1473 (@taka1473)
on CodePen.
こちらは意図した動きになってくれます。
あとがき
もっといい方法がある気がする…。
あったら教えて下さい。（むしろ誰かに教えてほしくて記事書いたところある）