heightやwidthが０の要素にpaddingを指定すると要素が現れてしまう

#はじめに
たとえばエラーメッセージの表示だったり、何か値を渡されたときには表示して、それ以外のときには非表示にしたい、という場合にpaddingつけようとして困ったよという話。

#中身が空のdivにpaddingをつけると
中身があるときは下のように表示してほしいとします。
<p class="codepen" data-height="282" data-theme-id="light" data-default-tab="html,result" data-user="taka1473" data-slug-hash="qBNdVem" style="height: 282px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="qBNdVem">
  <span>See the Pen <a href="https://codepen.io/taka1473/pen/qBNdVem">
  qBNdVem</a> by taka1473 (<a href="https://codepen.io/taka1473">@taka1473</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

このとき、p要素の中身がないとどうなるか。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="taka1473" data-slug-hash="ExyjoXX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ExyjoXX">
  <span>See the Pen <a href="https://codepen.io/taka1473/pen/ExyjoXX">
  ExyjoXX</a> by taka1473 (<a href="https://codepen.io/taka1473">@taka1473</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

こうなります。
要素の正味の部分（文字とかが表示される部分）というのはheightからpaddingの高さを引いた数字になるが、heightは負の値を取れないのでpaddingのぶん正味の部分が高くなる（？）、ということらしいです。

#回避方法
####1.div要素を親要素に追加して、そちらにpaddingをつける。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="taka1473" data-slug-hash="ZEOGvvB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ZEOGvvB">
  <span>See the Pen <a href="https://codepen.io/taka1473/pen/ZEOGvvB">
  ZEOGvvB</a> by taka1473 (<a href="https://codepen.io/taka1473">@taka1473</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
これで要素がない時には非表示にできます。でもこれだとpaddingのところはpinkになりませんね。

####2.子要素で無理やり
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="taka1473" data-slug-hash="GRqJyQz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="GRqJyQz">
  <span>See the Pen <a href="https://codepen.io/taka1473/pen/GRqJyQz">
  GRqJyQz</a> by taka1473 (<a href="https://codepen.io/taka1473">@taka1473</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
そもそも要素がないのでそこにpadding入れても効かないから大丈夫っていう考え方。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="taka1473" data-slug-hash="vYKOpzv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vYKOpzv">
  <span>See the Pen <a href="https://codepen.io/taka1473/pen/vYKOpzv">
  vYKOpzv</a> by taka1473 (<a href="https://codepen.io/taka1473">@taka1473</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
こちらは意図した動きになってくれます。

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