要素の境界線

1. .cdvSample051{ height: 3em; border: solid 1em; }

1. <div class="cdvSample051">
2. <div style="box-sizing: content-box;">例</div></div>

box-sizing プロパティを content-box と指定しました。box-sizing プロパティは非継承プロパティであり、初期値は content-box です。指定された幅と高さは、要素のコンテンツボックスを決定します。つまりパディングまたは境界線は、この指定された幅と高さの外側に配置されます。

1. .cdvSample051{ height: 3em; border: solid 1em; }

1. <div class="cdvSample051">
2. <div style="box-sizing: border-box;">例</div></div>

box-sizing プロパティを border-box と指定しました。指定された幅と高さは、要素の境界ボックスを決定します。つまりパディングまたは境界線は、この指定された幅と高さの内側に配置されます。

1. cdvSample061 > div { padding: 1em; border-width: medium; }
2. cdvSample061 > div > div { border-style: solid; border-width: inherit; }

1. <div class="cdvSample061">
2. <div style=" border-style: dashed; ">親<div>子</div></div></div>

例示の雛型です。親要素のstyle属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素と子要素の境界線の記述は、継承の確認の為に記述しています。

2. border-style: none;

親要素に border-style: none; を記述しました。border-width: medium; が記述されていますが、border-style: none; が記述されている為に border-width の計算値は 0 となり、子要素は継承で計算値の 0 を採用します。

2. border-style: dashed; border-color: transparent;

border-width を 0 とはしたくないが線は表示したくない場合は、border-color にキーワード transparent を指定して透過する方法があります。

1. cdvSample062 > div { padding: 1em; border-style: dashed; border-width: 1px; }
2. cdvSample062 > div > div { border-style: solid; }

1. <div class="cdvSample062">
2. <div style="">親<div style="">子</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
パティングは、親子の余白として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。親要素と子要素の境界線の記述は、継承の確認の為に記述しています。

2. <div style=" color: #0000ff; ">親<div style="">子</div></div></div>

親要素に color: #0000ff を指定しました。 親要素の境界線は currentColor(初期値) であるので同じ色に、子要素の前景色(文字の色)は省略された継承プロパティなので親要素と同じ色に、子要素の境界線は省略された非継承プロパティで初期値の currentColor が採用されて同じ色に変わります。

2. <div style=" border-color: #ff0000; ">親<div style="">子</div></div></div>

親要素に border-color: #ff0000; を指定しました。 親要素の境界線の色だけを変えたら、他はかわりません。

2. <div style=" border-color: #ff0000; ">親<div style=" border-color: inherit; ">子</div></div></div>

親要素に border-color: #ff0000; を、子要素に border-color: inherit; を指定しました。 親要素に境界線の色を指定し、子要素の境界線の色に inherit (継承) を指定すると、やっと親子の要素で同じになります。要素単位で文字色(前景色)と境界線の色の組み合わせを維持したい場合は、境界線の色を別途に継承する必要があります。

2. <div style=" border-color: currentColor; color: #0000ff; ">親<div style=" border-color: inherit; color: #339966; ">子</div></div></div>

親要素の境界線の色を currentColor を指定(或いは指定しない)、子要素の境界線の色に inherit (継承) を指定すると、currentColor キーワードが継承されます。

2. <div style=" border-color: currentColor; color: #0000ff; ">親<div style=" border-color: inherit;">子<div style=" color: #339966; ">孫</div></div></div></div>

前景色(文字の色)の指定を孫要素(親子の間に装飾用に要素を作成)として、境界線は子要素で継承する方法です。