border:0 と border:none は何が違うのか

Category : CSS

ボーダーのスタイルをリセットする場合などに使われる指定について。
border: 0;border: none; どちらを使いますか? ということではなく、この2つはどう違うのか、という話です。

border プロパティについてですが、これは4つのボーダーの指定をまとめて行うショートハンドプロパティです。
構文としては次のようになります。
(参考: CSS 2.1 Box model, CSS Backgrounds and Borders Module Level 3)

// CSS 2.1
[ <border-width> || <border-style> || <'border-top-color'> ] | inherit

// CSS Backgrounds and Borders Module Level 3
<border-width> || <border-style> || <color>

若干構文が違いますが、結果は同じです。

Borders Module Level 3 に inherit キーワードがないのは all properties accept the ‘initial’ and ‘inherit’ keywords (CSS Values and Units Module Level 3) だからですね。

今回は関係ないですが、色の指定部分についても。
CSS 2.1 では <’border-top-color’> となっていますが、これは border-top-color プロパティに指定できる値と同じ値が指定できるという意味です。で、border-top-color に指定できるものは

<color> | transparent | inherit

となります。

Borders Module Level 3 は <color> なので分かりやすいですね。transparent キーワードは <color> に含まれます。
(参考: CSS Values and Units Module Level 3, CSS Color Module Level 3)

それでは本題に。
まずは border: 0; から。

0 は <length> なので、これは border-width に指定される値ですね。
<border-width> = <length> | thin | medium | thick なので。<border-style> 形式はキーワードのみで構成されているので当てはまりません。

ついでに書いておくと、0 に単位をつけなくてもいいのは After a zero length, the unit identifier is optional だからです。
(参考: Syntax and basic data types, CSS Values and Units Module Level 3)

次に <border-width> を使用する border-*-width プロパティの部分を見ると、Computed value の部分に absolute length; ’0′ if the border style is ‘none’ or ‘hidden’ と書かれています。
つまり、border-style の値が none または hidden の場合には、border-*-width0 になるということです。

これで border: 0; でも border: none; でもボーダーが表示されなくなる理由は分かりました。
<border-style> の箇所を見ても、none キーワードの説明には No border; the computed border width is zero. となっています。
ただし、Borders Module Level 3 の場合にはちょっと違っていて「ボーダーが画像でない限りは」という注意書きがあります。

また、border-*-style の初期値は none キーワードなので、border: 1px red; などと書いても、元々ボーダーが指定されていない要素にボーダーはつきません。

以上です。

ちょっと追加。

Leave a Reply