あるDOM要素の高さや幅を求めるとき、ボーダーや余白を含めるかどうかによって値が変わります。jQuery には場合によって使い分けられるいくつかの関数が用意されていて便利です。これらをまとめておきます。

height() はpadding, border, margin を含まない高さを求める関数です。同様にして幅を求める関数に width() があります。

innerHeight() は padding を含む高さを求める関数です。border, margin は含みません。同様にして幅を求める関数に innerWidth() があります。

outerHeight(false) で padding, border を含む高さを求められます。ここで outerHeight(true) とすると、さらに margin も含んだ高さを求められます。同様にして幅を求める関数に outerWidth() があります。

以上をまとめると次の表のようになります。

※〇は含む、×は含まない

なお、これらの関数で値を設定することも可能なのですが、これについては別の機会にまとめます。