#はじめに
たとえばエラーメッセージの表示だったり、何か値を渡されたときには表示して、それ以外のときには非表示にしたい、という場合に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.

こちらは意図した動きになってくれます。

#あとがき
もっといい方法がある気がする…。
あったら教えて下さい。（むしろ誰かに教えてほしくて記事書いたところある）