borderとoutlineは同じ枠線？箱の幅が変わるかを測ってみよう

要素の周りに線を付けるborderとoutline。見た目は似ていても、レイアウトでの扱いが違うよ。小さな箱で幅を測ってみよう。

このページで確認するのは、線を付けたときに箱の幅が変わるかどうか。必要なのはブラウザだけ。フォーカスを示す線を、理由なく消すための例ではないよ。

borderは箱の幅の計算へ入る

.sample {
  box-sizing: content-box;
  width: 160px;
  border: 8px solid #6551a0;
}

この例では内容幅が160pxで、左右のborderが8pxずつ加わる。余白なしなら、外側の幅は176pxになる。box-sizing:border-boxなら、同じwidthの解釈が変わる点も覚えておこう。

outlineは場所を取らない

.sample {
  width: 160px;
  outline: 8px solid #6551a0;
}

outlineは通常のレイアウトで場所を取らず、周囲の要素との間隔を押し広げない。その分、近くの内容と重なって見えないかも確認したいね。

作例で測ってみる

下の作例を線なし・border・outlineへ切り替える。測定欄はgetBoundingClientRectで得た箱の幅を表示する。線なしとoutlineでは160px、borderでは176pxになる構成だよ。

outlineが見えていても、測定された箱の幅にその線のはみ出しが含まれるわけではない。リセットで線なしへ戻せる。

キーボード操作の手掛かりを残す

outlineはフォーカスの表示にも使われる。利用者が今どこを操作しているか分からなくなるので、デザインを整えるためにすべてのoutlineを一括で消さないようにしよう。別の見えるフォーカス表示を設計し、キーボードでも確かめたいね。

MDNのoutlineと、box-sizingの作例を合わせると、見える線と幅の計算を整理しやすいよ。