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
などと書いても、元々ボーダーが指定されていない要素にボーダーはつきません。
以上です。
ちょっと追加。