jQuery:高さ / paddingを含めた高さ / marginを含めた高さの求め方(検証付き)

jqueryで要素の高さを求めたいことって結構あるかなと思います。

たとえば、横に並んだ要素の高さを揃えたり、ページ内リンクのときに、固定ヘッダー部分がタイトルに被らないようにしたりなどです。

このように要素の高さは割といろいろな場面で使います。このとき、paddingやborderも含んだ高さが欲しいと思ったりすることがあります。その取得の仕方を今回メモしておきたいと思います。

ついでにmarginも確認してみます。

求め方

通常の高さ

var h1 = $(".example").height();

要素の純粋な高さが求められます。

paddingとborderまで含む高さ

var h2 = $("div").outerHeight();

要素の高さにpadding、borderの高さも加えた高さが求められます。box-sizingの設定によっては、取得できる高さが変わりそうです。

paddingとborderとmarginを含む高さ

var h3 = $("div").outerHeight(true);

要素の高さにpadding、border、marginをの高さも加えた高さが求められます。box-sizingの設定によっては、取得できる高さが変わりそうです。

では、実際に試してみます。下記要素を例に値を取得してみましょう。

<div class="example"></div>
.example {
  background: orange;
  border: 10px solid black;
  box-sizing: content-box;
  height: 100px;
  margin: 10px; 
  padding: 10px; 
  width: 100px;
}

要素の特徴

  • 幅、高さ100px
  • border 10px(上下左右)
  • margin 10px(上下左右)
  • padding 10px(上下左右)
  • height()・・・高さ100pxが取得できる
  • outerHeight()・・・borderとpadding、どちらも上下合わせて20pxなので、$20px \times 2= 40px$分高くなる
  • outerHeight(true)・・・margin上下合わせて20pxなので、40pxに20px加えた60px分高くなる
height()
高さ
px
outerHeight()
paddingとboederを含む
px
outerHeight(true)
さらにmarginも含む
px

本当に$+40px$、$+60px$になっています。

「box-sizing」が「border-box」の場合

content-box

先ほどの上の例では、クラス「example」は「box-sizing: content-box;」と設定していました。まずは、こちらから見ておきます。この「content-box」は、要素の外側にpaddingやborderを加えるというような設定です。

たとえば、高さ200px、paddingが上下で20px設定しているとすれば、「要素+paddingの高さ」は$200px + 20px = 240px$となります。
※上は幅方向での画像ですが、イメージはできるかと思いますm(__)m

border-box

次にこれから確認していく「border-box」を見ていきます。

「content-box」とは反対で、paddingやborderが要素の内側にきます。先ほどの例で考えると、高さ200px、paddingが上下で20px設定した場合、「要素+paddingの高さ」は200pxとなります。
※上は幅方向での画像ですが、イメージはできるかと思いますm(__)m

つまり、高さを200pxに設定しても、実際テキストや画像を置くスペースは高さ160pxとなります。これが「border-box」の特徴ですね。

では、実際に試してみます。先ほどの例の「box-sizing」を「border-box」に変更しただけのもので見てみましょう。

<div class="example2"></div>
.example2 {
  background: orange;
  border: 10px solid black;
  box-sizing: border-box;
  height: 100px;
  margin: 10px; 
  padding: 10px; 
  width: 100px;
}
要素の特徴
  • 幅、高さ100px
  • border 10px(上下左右)
  • margin 10px(上下左右)
  • padding 10px(上下左右)
  • height()・・・「border-box」のためborderとpadding、どちらも上下合わせて20pxなので、$20px \times 2= 40px$分引いた値 60pxになる
  • outerHeight()・・・高さ100pxが取得できる
  • outerHeight(true)・・・margin上下合わせて20pxなので、100pxに20px加えた120pxになる
height()
高さ
px
outerHeight()
paddingとboederを含む
px
outerHeight(true)
さらにmarginも含む
px

まとめ

outerHeight()の存在は知っていましたが、引数にtrueを渡すことでmarginも含んだ値を取得できるのはなかなか便利ですね。

今後使う機会があるかもしれないです。

注意点

「box-sizing」の値が「border-box」なのか?「content-box」なのか?という点を気にしておくと、余計な修正は減るのかなと思います。