outline-offset プロパティ
outline-offset プロパティは、アウトラインとborderとの間に余白を指定するプロパティです。
アウトラインはborderの外側に描写され、borderのように行下左右の区別はありません。
アウトラインは、borderより外に表示されます。そのためにmarginなどで調整する必要があります。
outline-offset: 1.5em;
outline: 2px red solid;
詳しくは Example を参照してください
ページ内 Index
構文(Syntax)
CSS
outline-offset: length | initial | inherit;
DOM ( JavaScript )
String = object.style.outlineOffset;
object.style.outlineOffset="length | initial | inherit";
値（Values）
| Value | 摘要 |
|---|---|
| 0 | 初期値（default値） |
| length | CSS長さの単位 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | 0 |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
outline-offsetの例です。
見やすいように、outlineは、点線、赤色、幅を3pxの線に指定しています。
borderの直ぐ外側、marginよりも内側がoutlineプロパティのデフォルトの表示位置です。outline-offsetを20pxに指定していますのでmagrinの幅より外側にアウトラインは表示されます。
関連するプロパティ
以下は関連するプロパティです。
| outline | アウトラインに関するプロパティの一括定義 |
| outline-width | 線の幅 |
| outline-style | 線種 |
| outline-color | 線の色 |
| outline-offset | borderからの余白 |