outlineプロパティには境界線をデフォルトの位置から内側や外側に描画するためのoutline-offset プロパティがあります。
詳しくはこちらの記事を参照して下さい。
CSSのborder と outline の違いを紹介します。
領域の外側に境界線を描画するプロパティには border と outline の2つのプロパティがあります。
2つのプロパティの違いを紹介します。
下記のHTML、CSSファイルを作成します。
body {
margin:0;
padding:0;
}
.frame01 {
width: 180px;
height: 64px;
border: 4px solid #ff6a00;
outline: 4px solid #006ab6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="border-and-outline.css" />
</head>
<body>
<div class="frame01">
枠です。
</div>
</body>
</html>
div枠にframe01クラスを設定します。CSSでframe01クラスに border と outline プロパティを設定します。
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
outlineの枠は左側と上側が表示されていないことがわかります。bodyのmarginプロパティが0であり、枠のmarginプロパティも0のため、
画面の境界の上部と左側のoutline枠が画面の外側に描画されているため、
画面には表示されない動作になります。
CSSファイルを下記に変更します。frame01のmarginを設定します。
body {
margin:0;
padding:0;
}
.frame01 {
margin:10px;
padding:0;
width: 180px;
height: 64px;
border: 4px solid #ff6a00;
outline: 4px solid #006ab6;
}
変更後のHTMLページの表示結果です。marginプロパティが設定されたため、outlineの枠の左側と上側も画面に表示される状態になります。
CSSファイルを下記に変更します。frame01のmarginとpaddingを設定します。
body {
margin:0;
padding:0;
}
.frame01 {
margin:10px;
padding:10px;
width: 180px;
height: 64px;
border: 4px solid #ff6a00;
outline: 4px solid #006ab6;
}
変更後のHTMLページの表示結果です。
先の表示結果から、枠の描画の左上の基準位置はborder枠の左上角になることがわかります。
また、outline の枠は枠の外側に表示されるため、marginプロパティで設定したマージンはコンテンツの枠からborderの枠の間の余白として設定されます。
枠の全体の大きさは、以下の大きさになります。
outline(left)の線幅 + boder(left)の線幅 + padding-left の幅 + width の幅 + padding-right の幅 + border(right)の線幅 + outline(right)の線幅
outline(top)の線幅 + boder(top)枠の線幅 + padding-top の高さ + height の高さ + padding-bottom の高さ + border(bottom)の線幅 + outline(bottom)の線幅
