「border：none」または「border：0」を使用する必要がありますか？

543

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

ボーダー：なし。
ボーダー：0;

css border

— ジョン・ヒメルマン
ソース

74

私はこのタイプの見落とされた質問が好きです。

— Christopher Altman、

453

どちらも有効です。それはあなたの選択です。

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

とは言っても、すべての運用CSSを手書きで作成している場合は、コメントで不平を言っているにもかかわらず、帯域幅を意識することに支障はありません。を使用border:0 すると、帯域幅をごくわずかに節約できます。それ自体はほとんど意味がありませんが、すべてのバイトをカウントすると、Webサイトが高速になります。

CSS2の仕様はこちらです。これらはCSS3で拡張されていますが、これに関連する方法はありません。

'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スタイルを設定します。レンダリング結果は同じです。何も表示されません。

— オリ
ソース

117

「トラフィックが多い場合、違いに気付くでしょう！」-私はそれを疑う。1時間に100万人の訪問者がいる場合でも、違いはわずか3MBです。そして、これらのビジターの誰もがCSSをキャッシュしていないことを想定しており、圧縮によってメリットが0であると想定しています。実際には、おそらく1日あたり数百KBの差になるでしょう。これは、大規模なサイトでは基本的に0です。border:none何とか良いとは思いませんが、これを推論として使用するのは誤りです。

— BlueRaja-ダニーPflughoeft 14

22

@ BlueRaja-DannyPflughoeftそれは何よりも皮肉でした.....または誇張...または両方のビット。そうです、何百万回も使用し、インターネット上の全員が一度にCSSにアクセスするようにしない限り、これがランタイムに影響を及ぼすことはおそらくありません。

— Oli

6

たぶん、その発言が皮肉っぽいという説明に追加する価値はありますか？:)

— timofey.com 2014

7

完全を期すために、別の側面を追加したいと思いました。1MBのデータを転送するには、一般的な木炭練炭に含まれるエネルギー量が必要です。Jay WalkersのこのTEDトークをご覧ください：player.vimeo.com/video/22399003。

— Zensursula

11

私がここに戻って、追加のナノ秒で応援するのは私だけですか？

— Leathan 2017

155

それらは実質的に同等であり、さまざまなショートカットを示しています。

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

そしてその他

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

どちらも機能します。どちらか1つを選んでそれを使用してください。

— ニッククレイバー
ソース

5

また、「長さがゼロになった後、ユニットIDはオプションです」のでborder: 0;、有効です。

— イシュマエル

59

@ダブは真剣に？、あなたは人々がw3schoolsにリンクするときに好きですか？

— ajax333221

29

@ ajax333221-w3schools（または任意の Webサイト）に対する白黒の態度に注意してください。 この場合、説明は問題ありませんが、一般的には嫌いですが、この質問に関連する説明は正確で、かなり簡潔です。あなたは一般的にそれらを嫌いですが、私はそうですが、コンテンツの0％が有用であると想定しないでください。

— Nick Craver

4

違う！で説明したように私の答えとで実証ライブデモ、border: 0ショートカットではありませんborder-width: 0。代わりに、ショートバージョンは、常にすべての3つのプロパティを設定しますborder-color、border-styleとborder-width。

— DenilsonSáMaia 2014

3

@DenilsonSá ボーダーの幅が0の場合、他の2つはここでは問題にならないため、それらは回答の最初の行と同じであると私は言った。余談ですが、ここでの動作を明確にしたCSS 2.1は、この回答から7か月後の最後の呼び出しであり、1年後の推奨としてプッシュされました。ここで古い答えを明確にしたい場合は、そうしてください！更新のための編集は積極的に推奨されます。

— Nick Craver

42

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

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

次の例では、IEとfirefoxの両方で、最初の2つのテストdivに境界線がありません。ただし、2番目の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>

— クリス
ソース

1

Sencha Touch 2で日付ピッカーの境界を削除するには、のborder: none代わりにを使用する必要がありましたborder: 0。

— Kris Khaira

39

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

shortandプロパティの拡張

よると、W3CのCSS2.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>

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

折りたたみボーダーモデルのテーブルコンテキストのボーダー

を使用してテーブルをレンダリングするとborder-collapse: collapse、レンダリングされた各ボーダーが複数の要素間で共有されます（内側のボーダーは隣接するセルとして共有されます。外側のボーダーはセルとテーブル自体の間で共有されますが、行、行グループ、列、列グループもボーダーを共有します））。仕様では、境界の競合解決に関するいくつかのルールが定義されています。

国境border-styleのhidden他のすべての競合のボーダーオーバーテイク優先。[…]

スタイルがのボーダーのnone優先度が最も低くなります。[…]

スタイルがhidden1 つもなく、少なくとも1つがそうでないnone場合は、幅の広いボーダーが優先され、ボーダーが広くなります。[…]

境界線のスタイルが色だけが異なる場合、[…]

したがって、テーブルコンテキストでは、border: hidden（またはborder-style: hidden）が最も優先され、共有枠は何があっても非表示になります。

優先順位のもう一方の端border: none（またはborder-style: none）の優先順位が最も低く、次に幅がゼロの境界が続きます（境界が最も狭いため）。この手段は、こと計算された値のborder-style: noneと計算された値のは、border-width: 0本質的に同じです。

カスケードルールと継承

以来noneと0異なる特性（影響を与えるborder-styleとのborder-width）とき、彼らは異なる動作をします、より具体的なルールの定義だけでスタイルや幅だけを。例については、Chrisの回答を参照してください。

ライブデモ！

これらのすべてのケースを1つのページに表示しますか？ライブデモを開いてください！

— デニルソンサマイア
ソース

21

使用する

border: none;

IEの一部のバージョンでは機能しません。IE9は問題ありませんが、以前のバージョンでは、スタイルが「なし」の場合でも境界線が表示されます。これは、入力ボックスの境界線が不要な印刷スタイルシートを使用しているときに発生しました。

border: 0;

すべてのブラウザで正常に動作するようです。

— キーラン
ソース

12

Oliから提供された仕様に従って、両方を使用できます。

私はいつも使用していますborder:0 none;。

これらを個別に指定しても害はありませんが、従来のCSS1プロパティ呼び出しを使用すると、一部のブラウザはCSSをより速く解析します。

けれどもがborder:0;、通常の境界線スタイルをデフォルトとしますnone、しかし私は、妙に上書きすることができ、デフォルトの境界線スタイルを強制するいくつかのブラウザに気づきましたborder:0;。

— Xenni82
ソース

「一部のブラウザはCSSをより速く解析します」 →CSSの解析時間に目立った違いはありません。そして、実際には、CSSの解析時間は、ケースの99.999999999999％には関係ありません。CSSレンダリング時間ははるかに重要です（また、この質問とはまったく無関係です）。

— DenilsonSáMaia 2014

1

一部のブラウザ？どういう意味ですか？夢か何かのようです。

— Rootical V. 2015

7

私が使う：

border: 0;

CSS 2.1の8.5.4以降：

'境界'

値： [<border-width> || <ボーダースタイル> || <'border-top-color'>] | 受け継ぐ

したがって、どちらの方法でも問題はありません。

— クレタス
ソース

1

ゼロドットはゼロソリッドと同じように見えます

— クリストファーアルトマン

1

そうだね。しかし、また、クリスの答えを参照

— アントニーHatchkins

5

まあ、正確に違いを見るためにborder: 0とborder: none、私たちはいくつかの実験を行うことができます。

実験：

3つのdivを作成してみましょう。1つ目は、幅をゼロに設定することでのみ境界線を無効にでき、2つ目は、スタイルをnoneに設定することでのみ無効化でき、3つ目は、境界線を設定して「無効化」できる透明にする色。次に、次の効果を試してみましょう。

border: 0;
border: none;
border: transparent

ボーダースタイル：ソリッド！重要; border-color：red！important; ボーダー幅：2px！重要; border-color：red！important; ボーダー幅：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とChromeの両方で同じでした。

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

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

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

— エイジスリーダンジグ
ソース

2

結果はほとんど同じ（境界線なし）ですが、0となしは技術的に異なることに対処しています。

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

ただし、後でスタイルシートでこれをオーバーライドしようとする場合は、当然、どちらか一方を具体的に指定します。3ピクセルのボーダーが必要な場合、それはボーダーを直接オーバーライドします。幅に関しては0です。点線のボーダーが必要になった場合、それはボーダーを直接オーバーライドすることになります。スタイリングに関しては何もありません。

— カーリー
ソース

2

CSSで境界線を削除する最も簡単な方法

border: 0;

— ラブクマー
ソース

-1

ボーダー0を使用する必要があります

私の意見と経験によると、Border：0を使用することをお勧めします。 ボーダーを使用するときはいつでも有効で非常に良い理由があります：なし、それは機能することを理解していますが、ボーダー、1px、2px、3pxなどを使用していると考えます。つまり、ボーダーの値を... px / em / rem右なので、border：0を使用する必要があります。境界線の値を削除するため。背景を使用するときに知っているとおり、なし。これは、他の値ではない背景を削除していることを意味します。

ありがとう

— ヴィノッドクマール
ソース

-3

私のポイントでは、

border:none 動作していますが、有効なw3c標準ではありません

とても使いやすい border:0;

— 膠腫
ソース

6

については何も無効ではありませんborder: none。

— クエンティン2016年