Soll ich "border: none" oder "border: 0'?

Question

Welche der beiden Methoden entspricht den W3C-Standards? Verhalten sich beide in allen Browsern wie erwartet?

Rahmen: keiner;
Grenze: 0;

Answer 1

Sie können einfach beides gemäß der von Oli freundlicherweise zur Verfügung gestellten Spezifikation verwenden.

Ich benutze immer border:0 none; .

Es schadet jedoch nicht, sie getrennt anzugeben, und einige Browser werden das CSS schneller analysieren, wenn Sie die alten CSS1-Eigenschaftsaufrufe verwenden.

Obwohl border:0; wird der Rahmenstil normalerweise auf none Ich habe jedoch festgestellt, dass einige Browser ihren Standard-Rahmenstil erzwingen, der seltsamerweise die border:0; .

Answer 2

Ich benutze:

border: 0;

Von 8.5.4 in CSS 2.1 :

Grenze

Wert: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit

Jede Ihrer Methoden ist also geeignet.

Answer 3

Nun, um genau den Unterschied zwischen border: 0 y border: none können wir einige Experimente machen.

Experiment:

Erstellen wir drei divs, ein erstes, dessen Rand nur deaktiviert werden kann, indem seine Breite auf Null gesetzt wird, ein zweites, das nur deaktiviert werden kann, indem sein Stil auf none gesetzt wird, und ein drittes mit einem Rand, der nur "deaktiviert" werden kann, indem seine Farbe auf transparent gesetzt wird. Dann probieren wir die Wirkung von:

• border: 0;
• border: none;

• border: transparent

  border-style: solid!important; border-color: rot!important; border-width: 2px!important; border-color: rot!important; Rand-Breite: 2px!important; border-style: solid!important;

  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>

Meine Ergebnisse waren sowohl in Firefox als auch in Chrome die gleichen:

border: 0; Scheint die Breite des Rahmens auf 0 und border-style auf none , aber nicht die Rahmenfarbe ändern;

border: none; Scheint nur den Rahmen-Stil zu ändern (in none );

border: transparent; Scheint die Rahmenfarbe in transparent und border-style auf none ;

Answer 4

Obwohl die Ergebnisse höchstwahrscheinlich die gleichen sein werden (kein Rand), beziehen sich 0 und none technisch gesehen auf unterschiedliche Dinge.

0 steht für die Breite des Rahmens und none für den Stil des Rahmens. Ein Rahmen mit der Breite 0 ist natürlich nicht vorhanden und hat daher keinen Stil.

Wenn Sie jedoch später in Ihrem Stylesheet die Absicht haben, dies außer Kraft zu setzen, müssen Sie natürlich das eine oder das andere ausdrücklich erwähnen. Wenn ich jetzt eine 3px Grenze wollte, wäre das direkt überschreiben border: 0 in Bezug auf die Breite. Wenn ich nun einen gepunkteten Rahmen haben möchte, würde ich border: none in Bezug auf das Styling direkt überschreiben.

Answer 5

Der einfachste Weg, den Rahmen mit css zu entfernen

border: 0;