web-dev-qa-db-ja.com

'border：none'と 'border：0'のどちらを使うべきですか？

2つの方法のうちどちらがW3C規格に準拠していますか？両方ともブラウザ間で期待どおりに動作しますか？

国境：なし。
ボーダー：0。

cssborder
491
John Himmelman

両方とも有効です。 それはあなたの選択です。

私はborder:0が短いので好きです。私はそれが読みやすいと思います。 noneはもっと読みやすいかもしれません。私たちは非常に有能なCSSポストプロセッサの世界に住んでいるので、私はあなたがあなたが好むものは何でも使用してそれから「コンプレッサー」を通してそれを走らせることを勧めます。ここで戦うに値する聖戦はありません。

すべてのプロダクションCSSを手書きで書いているのであれば、コメントの煩雑さにもかかわらず、帯域幅を意識しても構いません。 border:0willを使用すると、無限の帯域幅を節約できます。それだけではほとんど意味がありませんが、すべてのバイト数をカウントするの場合、Webサイトは速くなります。

CSS2の仕様は こちらです 。これらはCSS 3では拡張されていますが、これには関係ありません。

'border'
    Value:      [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
    Initial:    see individual properties
    Applies to:     all elements
    Inherited:      no
    Percentages:    N/A
    Media:      visual
    Computed value:     see individual properties

幅、スタイル、色を自由に組み合わせることができます。
ここで、0は幅を設定し、noneはスタイルを設定します。それらは同じレンダリング結果を持ちます。何も表示されません。

407
Oli

effect 、 は異なるショートカットを指しています ：

border: 0;
//short for..
border-width: 0;

そしてもう一つ。

border: none;
//short for...
border-style: none;

両方ともうまくいきます、どちらか片方を選んでそれを使ってください:)

142
Nick Craver

他の人が言ったように両方が有効であり、トリックをするでしょう。私は100％彼らが同一であると確信していません。いくつかのスタイルのカスケードが行われている場合、それらは理論的には異なる値をオーバーライドしているので、異なる結果を生み出す可能性があります。

例えば。 "border：none;"を設定した場合そしてその後、ボーダーの幅とスタイルをオーバーライドする2つの異なるスタイルがあり、一方は何かをし、もう一方はしません。

次の例では、IEとfirefoxの両方で、最初の2つのテストdivが境界なしで出てきます。ただし、2番目の2つのブロックの最初のdivはプレーンで、2番目のブロックの2番目のdivは中間の幅の破線で囲まれています。

そのため、どちらも有効ですが、カスケードを多用する場合は、あなたのスタイルに注目する必要があるかもしれません。

<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}

div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}

</style>
</head>
<body>

<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>

<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

</body>
</html>
40
Chris

（注：この回答は2014-08-01に更新され、より詳細で正確になり、 liveデモが追加されました ）。

Shortandプロパティを拡張する

W3C CSS 2.1仕様 （“省略された値は初期値に設定されます”）によると、以下のプロパティは等価です。

border: hidden;    border-style: hidden;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: none;      border-style: none;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: 0;         border-style: none;
                   border-width: 0;
                   border-color: <the same as 'color' property>

これらの規則が要素の境界に適用される最も具体的な規則である場合、幅がゼロであるか、hiddennoneスタイルであるために、境界は表示されません。したがって、一見すると、これら3つの規則は同等に見えます。ただし、他のルールと組み合わせると、動作が異なります。

折りたたみボーダーモデルにおけるテーブルコンテキスト内のボーダー

テーブルがborder-collapse: collapseを使用してレンダリングされると、レンダリングされた各境界は複数の要素間で共有されます（内側の境界は隣接セルとして共有され、外側の境界はセルとテーブル自体の間で共有されます。国境）。この仕様はボーダーコンフリクト解決のためのいくつかの_ /規則を定義しています

  1. hiddenのborder-styleを持つ罫線は、競合する他のすべての罫線よりも優先されます。 […]

  2. noneというスタイルの枠線は、最も優先順位が低くなります。 […]

  3. どのスタイルもhiddenでなく、それらの少なくとも1つがnoneではない場合、幅の狭いものは幅の広いものを優先して破棄されます。 […]

  4. 枠線のスタイルが色だけで異なる場合は、[…]

したがって、テーブルのコンテキストでは、border: hidden（またはborder-style: hidden）が最高の優先順位を持ち、共有枠を非表示にします。

優先順位の反対側では、border: none（またはborder-style: none）が最も優先順位が低く、その後に幅0の境界が続きます（最も狭い境界であるため）。これは、border-style: noneの 計算値 とborder-width: 0の 計算値 が本質的に同じであることを意味します。

カスケード規則と継承

noneと0は異なるプロパティ（border-styleとborder-width）に影響を与えるので、 より具体的な規則 がスタイルだけまたは幅だけを定義するとき、それらは異なった振る舞いをします。例として Chris answer を見てください。

ライブデモ ！

1つのページにこれらすべてのケースを見たいですか？ライブデモを開く！

33
Denilson Sá Maia

を使う

border: none;

iEの一部のバージョンでは動作しません。 IE9は問題ありませんが、以前のバージョンではスタイルが "none"の場合でも境界線を表示します。入力ボックスの枠線が不要な印刷スタイルシートを使用しているときにこれを経験しました。

border: 0;

すべてのブラウザでうまく動作するようです。

21
Kieran

あなたは、Oliによって親切に提供された仕様に従って、単に両方を使用することができます。

私はいつもborder:0 none;を使います。

ただし、それらを別々に指定しても害はありません。また、従来のCSS1プロパティ呼び出しを使用した場合、一部のブラウザではCSSの解析が速くなります。

border:0;は通常noneにボーダースタイルをデフォルト設定するでしょうが、私はいくつかのブラウザが奇妙にborder:0;を上書きすることができるそれらのデフォルトボーダースタイルを強制することに気づいた。

11
Xenni82

私が使う：

border: 0;

CSS 2.1の 8.5.4から ：

'境界'

値： [<border-width> || <border-style> || <'border-top-color'>] |受け継ぐ

どちらの方法でも問題ないようです。

6
cletus

border: 0とborder: noneの違いを正確に理解するために、いくつか実験をすることができます。

実験：

3つ目のdivを作成しましょう。1つは幅を0に設定することによってのみ無効にすることができ、2つ目はスタイルをnoneに設定することによってのみ無効にすることができます。色を透明にします。それからの効果を試してみましょう：

  • border: 0;
  • border: none;

  • border: transparent

    ボーダースタイル：しっかり！ボーダーカラー：赤！ border-width：2px！重要です。ボーダーカラー：赤！ border-width：2px！重要です。ボーダースタイル：しっかり！

var container = document.querySelector('#container');
var btnSetZero = document.querySelector('#setZero');
var btnSetNone = document.querySelector('#setNone');
var btnSetTransparent = document.querySelector('#setTransparent');
var btnReset = document.querySelector('#reset');
btnSetZero.addEventListener('click', () => {
        container.className = "border-zero";
});

btnSetNone.addEventListener('click', () => {
        container.className = "border-none";
});

btnSetTransparent.addEventListener('click', () => {
        container.className = "border-transparent";
});

btnReset.addEventListener('click', () => {
        container.className = "";
});
div div {
  border: 2px solid red;
  margin: 2px;
  font-family: monospace;
  white-space: nowrap;
  width: 250px;
}

div.border-zero div {
  border: 0;
}
div.border-none div {
  border: none;
}
div.border-transparent div {
  border: transparent;
}
<div id="container">
  <div style="border-style: solid!important; border-color: red!important;">
    border-style: solid!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-color: red!important;">
    border-width: 2px!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-style: solid!important;">
    border-width: 2px!important;<br>
    border-style: solid!important;
  </div>
</div>

<button id="setZero">border: 0;</button>
<button id="setNone">border: none;</button>
<button id="setTransparent">border: transparent;</button>
<button id="reset">reset</button>

私の結果はFirefoxとクロムの両方で同じでした：

border: 0; border-widthを0に、border-styleをnoneに設定したようですが、border-colorは変更しません。

border: none;ボーダースタイルのみを（noneに）変更するようです。

border: transparent; border-colorをtransparentに、border-styleをnoneに変更するようです。

3
Agesly Danzig

ほとんど同じ結果（ボーダーなし）になりますが、0とnoneは技術的に異なるものに対処しています。

0はボーダー幅を指定し、noneはボーダースタイルを指定します。明らかに幅0の境界は存在しないのでスタイルはありません。

ただし、後でスタイルシートの中でこれをオーバーライドする予定がある場合は、当然ながらどちらか一方を明確に指定します。私が今3pxボーダーを欲しがったら、それはボーダーを直接オーバーライドするでしょう：幅に関して0。私が今、点線のボーダーを欲しがったら、それはボーダーを直接オーバーライドするでしょう。スタイルに関してはどれも。

2
Carly

WE使用境界線0 /

私の意見と経験によれば、Borderを使用してください。 ボーダーを使うときはいつでも、正当で非常に良い理由があります：なし、うまくいくと思いますが、1px、2px、3pxなどボーダーを使うことを考えます。 .px/em/rem正しいので、border：0を使う必要があります。背景を使用するときに知っているので、境界値を削除します。それは私たちが背景を取り除いているということです。

ありがとう

0
Vinod Kumar