先日健康診断にて身長が1cm近く伸びていて驚いたともよーんです。
さて、前回は要素の幅・高さを取得する方法をご紹介しましたが、
今回は「②そこから余白分を引いてコンテンツの幅と高さを計算をご紹介する」に進む前に、
少し寄り道して要素の幅・高さ取得についてもう少し細かく見ていこうと思います。

前回ご紹介したwidth()、height()の他にも、innerWidth()、innerHeight()、outerWidth()、outerHeight()というものがあって、paddingやmarginを含む、含まないが選べます。

詳細は以下の通りになります。

width()、height()： padding、border、marginを含まない、その要素の純粋な幅・高さ。
innerWidth()、innerHeight()： paddingを含めた幅・高さで、border、marginを含まない。
outerWidth()、outerHeight()： padding、borderを含めた幅・高さで、marginは含まない。
outerWidth(true)、outerHeight(true)： padding、border、margin全て含んだ幅・高さ。

図にしてみました。

とてもシンプルですね。

まったく関係ありませんが、要素の幅のことを考えると、女性の下着のことを思い出します。
胸囲にパッドの厚みを加えるか加えないか、それはあなたのさじ加減で！

ではでは、また次回！