概要

要素の幅は、
コンテンツの左端と右端の距離です。

－－要素の幅－－－
マージン
ボーダー
パディング
コンテンツ領域

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

  • 1.width : 要素の幅を指定する個別指定プロパティ
  • 2.max-width : 要素の最大幅を指定する個別指定プロパティ
  • 3.min-width : 要素の最小幅を指定する個別指定プロパティ
  • 4.box-sizing : 要素の幅と高さの適用方法を制御，指定する個別指定プロパティ

インライン要素への 幅の指定

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

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

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

要素の幅の適用方法

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

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

例
  1. box-sizing: content-box;

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

例
  1. box-sizing: border-box;

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

例

計算値 (継承)

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

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

親
子
孫
  1. width: 80%;

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

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

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

親子
孫

優先度

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

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

例
  1. width: 4em;

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

例
  1. width: 4em;
  2. max-width: 5em;

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

例
  1. width: 4em;
  2. max-width: 2em;

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

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

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

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

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

例

Flex

おまけ