border:0とborder:noneは何が違うのか
公開:
更新:
ボーダーのスタイルをリセットする場合などに使われる指定について。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-*-widthは0になるということです。
これで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などと書いても、元々ボーダーが指定されていない要素にボーダーはつきません。
以上です。
ちょっと追加。 一言で言うと、border:0 は border-width, border:none は border-style という話です。