概要

要素の高さは、
コンテンツの上端と下端の距離です。

│要素の高さ│
マージン
ボーダー
パディング
コンテンツ領域

要素の高さは、コンテンツの上端と下端との距離を言います。
height プロパティで指定しますが、その指定する内容も、box-sizing プロパティによりコンテンツ領域の高さか境界領域の高さかを指定する事ができます。

尚、ブロックレベル要素での要素に含まれる行ボックスの最小の高さや、非置換インライン要素での行ボックスの高さの計算に使われる高さは line-height プロパティで指定します。

  • 1.height : 要素の高さを指定する個別指定プロパティ
  • 2.max-height : 要素の最大高を指定する個別指定プロパティ
  • 3.min-height : 要素の最小高を指定する個別指定プロパティ
  • 4.line-height : テキストのような行で使われる空間の量を設定する個別指定プロパティ
  • 5.box-sizing : 要素の幅と高さの適用方法を制御，指定する個別指定プロパティ

インライン要素への 高さの指定

height プロパティの指定

  1. cdvSample021 > * { height: 3em; outline: solid 1px currentColor; }
  1. <div class="cdvSample021">
  2. <div>ブロック<br>要素</div>
  3. <span>インライン要素</span
  4. ><span>インライン要素</span
  5. ><span>インライン要素</span>
  6. <div>ブロック<br>要素</div>

インライン要素の閉じタグを複数行に渡らせることで、タグ内に改行コードを押し込む対応をしています。
テキスト，インライン要素後の改行コードは１つのスペース相当と扱われてしまう為です。

ブロック
要素
インライン要素インライン要素インライン要素
ブロック
要素

line-height プロパティの指定

  1. cdvSample022 > * { line-height: 3em; outline: solid 1px currentColor; }
  1. <div class="cdvSample022">
  2. <div>ブロック<br>要素</div>
  3. <span>インライン要素</span
  4. ><span>インライン要素</span
  5. ><span>インライン要素</span>
  6. <div>ブロック<br>要素</div>

インライン要素の閉じタグを複数行に渡らせることで、タグ内に改行コードを押し込む対応をしています。
テキスト，インライン要素後の改行コードは１つのスペース相当と扱われてしまう為です。

ブロック
要素
インライン要素インライン要素インライン要素
ブロック
要素

要素の高さの適用方法

  1. cdvSample031 > div { outline: solid 1px currentColor; padding: 1em; height: 4em; }
  1. <div class="cdvSample031">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
輪郭線は、要素を視覚化する為に記述しています。

例
  1. box-sizing: content-box;

キーワード content-box の値を指定しました。content-box は、height の寸法は、コンテンツ領域のみを含むものとなり、パディング、境界線、マージン領域を含まない事を記します。content-box は、box-sizing の初期値です。

例
  1. box-sizing: border-box;

キーワード border-box の値を指定しました。border-box は、height の寸法は、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれない事を記します。

例

計算値 (継承)

height プロパティの指定

  1. cdvSample041 > div { outline: solid 1px currentColor; height: 7em; padding: 1.0em; }
  2. cdvSample041 > div > * { outline: dashed 1px currentColor; padding: 1.0em; }
  3. cdvSample041 > div > * > div { outline: solid 1px currentColor; height: inherit; }
  1. <div class="cdvSample041">
  2. <div>親<div style="">子<div>孫</div></div></div></div>

例示の雛型です。style属性を書き換えて例示しています。

親
子
孫
  1. height: 80%;

単位 % の値を指定しました。% は、包括要素のコンテンツ領域の高さ (height) に対しての割合です。割合は、継承の対象となる計算値では計算されずに割合のままです。

親
子
孫
  1. <div class="cdvSample041">
  2. <div>親<span style="height: 80%;">子<div>孫</div></span></div></div>

子要素を span 要素(インライン要素)に変更しました。span では、height プロパティがこの要素に適用されない為に使用値は存在しません。しかし計算値はあります。
(span の子として div があるのは HTML として不適切ですが、計算値，継承の例示として意図的に提示させて頂いています。)

親子
孫

line-height プロパティの指定

  1. cdvSample042 > div { outline: solid 1px currentColor; padding: 1.0em; }
  2. cdvSample042 > div > div { outline: solid 1px currentColor; line-height: inherit; font-size: 2em; }
  1. <div class="cdvSample042">
  2. <div style="">親<br>要素<div>子<br>要素</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。

親
要素
子
要素
  1. line-height: 2;

単位のない値 (number) を指定しました。number は、font-size の計算値に掛けたものが使用値です。計算値は、指定された number と同じです。

親
要素
子
要素
  1. line-height: 200%;

単位 % の値を指定しました。% は、要素自身のフォントサイズに対する相対値です。計算値はこの percentage に要素のフォントサイズの計算値を掛けたものです。

親
要素
子
要素

優先度

  1. cdvSample010 > div { outline: solid 1px currentColor; }
  1. <div class="cdvSample010">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
輪郭線は、要素を視覚化する為に記述しています。

例
  1. height: 3em;

プロパティ height だけを指定しました。

例
  1. height: 3em;
  2. max-height: 4em;

プロパティ height と max-height を指定しました。

例
  1. height: 3em;
  2. max-height: 2em;

プロパティ height と max-height を指定しました。

例
  1. max-height: 2em;
  2. min-height: 1em;

プロパティ max-height と min-height を指定しました。

例
  1. max-height: 2em;
  2. min-height: 3em;

プロパティ max-height と min-height を指定しました。

例

Flex

おまけ