仕様

outline-offset<length>
一括/個別個別指定プロパティ
初期値0
適用対象すべての要素(疑似要素を含む)
継承なし
百分率なし
計算値絶対長

outline-offset プロパティは、輪郭線の境界の縁からの距離を設定する個別指定プロパティです。
非継承プロパティで、初期値は 0 なので、省略時は 0 が指定値となります。

上，右，下，左に異なる値を指定する事はできません。

<length> 値

  1. cdvSample510 > div { margin: 1.5em; padding: 1em; outline: solid; border: dashed 1px #0000ff; }
  1. <div class="cdvSample510">
  2. <div style="font-size: 2em;">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
マージンとパティングは、輪郭線の表示領域として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の指定は、線種の初期値が none でそのままでは輪郭線がないので記述しています。フォントサイズは、距離を記述する単位にフォントサイズがあるのでその確認の為の記述です。

例
  1. outline-offset: 1em;
  2. font-size: 2em;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. outline-offset: 1.6rem;
  2. font-size: 2em;

単位 rem の値を指定しました。rem は、ルート要素の font-size の計算値を用います。
(html { font-size: 62.5%; } body { font-size: 1.6em; } で、body からそのまま継承している状態で提示しています。)

例
  1. outline-offset: 16px;
  2. font-size: 2em;

単位 px の値を指定しました。px は、1 ピクセルです。

例
  1. outline-offset: 1vw;
  2. font-size: 2em;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例
  1. outline-offset: -1.6rem;
  2. font-size: 2em;

負の数を指定しました。負の数は、境界の縁の内側で描画します。

例

CSS全体のキーワード

  1. cdvSample520 > div { margin: 1em; padding: 1em; outline: solid #0000ff; outline-offset: 0.5em; border: dashed 1px #0000ff;}
  2. cdvSample520 > div > div { outline-style: solid; }
  1. <div class="cdvSample520">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
マージンとパティングは、輪郭線の表示領域として指定しています。文字(コンテンツ)は、前景色(文字の色)と文字サイズの確認の為に記述しています。輪郭線の指定は、線種の初期値が none でそのままでは輪郭線がないので記述しています。親要素の輪郭線の記述は、継承の確認の為に記述しています。

親
子
  1. outline-offset: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. outline-offset: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。outline-offset プロパティの初期値は 0 です。

親
子
  1. outline-offset: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。outline-offset プロパティは非継承プロパティなので初期値の 0 を設定します。

親
子