Verwenden Sie CSS, um Ihre Ränder und Grenzen auf Null zu setzen

Dieser Artikel erklärt die Verwendung how CSS auf Null setzen Margen und Rahmen, damit Ihre Webseiten in jedem Browser konsistent gerendert werden.

Normalisieren von Werten für Ränder und Auffüllung

Der beste Weg, das Problem eines inkonsistenten Boxmodells zu lösen, besteht darin, alle Ränder und Füllwerte von HTML-Elementen auf Null zu setzen. Es gibt mehrere Möglichkeiten, dies zu tun, indem Sie diese CSS-Regel zu Ihrem Stylesheet hinzufügen:

Auch wenn diese Regel unspezifisch ist, da sie in Ihrem externen Stylesheet enthalten ist, hat sie eine höhere Spezifität als die Standardbrowserwerte. Da Sie diese Standardeinstellungen überschreiben, wird dieser eine Stil das erreichen, was Sie sich vorgenommen haben.

Sobald Sie alle Ränder und Auffüllungen deaktiviert haben, müssen Sie sie für bestimmte Teile Ihrer Webseite selektiv wieder aktivieren, um das Erscheinungsbild zu erzielen, das Ihr Design erfordert.

Verwenden Sie CSS, um Grenzen zu normalisieren

Älter Versionen des Internet Explorers hatte einen transparenten oder unsichtbaren Rahmen um Elemente. Wenn Sie den Rahmen nicht auf 0 setzen, kann dieser Rahmen Ihre Seitenlayouts durcheinander bringen. Wenn Sie sich entschieden haben, diese veralteten IE-Versionen weiterhin zu unterstützen, müssen Sie dies angehen, indem Sie Ihrem Textkörper und Ihren HTML-Stilen Folgendes hinzufügen:

HTML, Körper {
Rand: 0px;
Füllung: 0px;
 Rahmen: 0px;
}

Ähnlich wie Sie die Ränder und den Abstand deaktiviert haben, deaktiviert dieser neue Stil auch die Standardrahmen. Sie können dasselbe auch tun, indem Sie den weiter oben im Artikel gezeigten Platzhalterselektor verwenden.

Warum konsistente Ränder und Grenzen im Webdesign wichtig sind

Der heutige Webbrowser hat sich weit von den verrückten Tagen entfernt, in denen jede Art von browserübergreifender Konsistenz Wunschdenken war. Heutige Webbrowser sind vollständig standardkonform. Sie spielen gut zusammen und liefern eine ziemlich konsistente Seitenanzeige in den verschiedenen Browsern. Dazu gehören die neuesten Versionen von Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari und die verschiedenen Browser aufdie unzähligen mobilen Geräte heute auf Websites zugreifen.

Zwar wurden Fortschritte bei der Darstellung von CSS in Browsern erzielt, aber es gibt immer noch Inkonsistenzen zwischen diesen verschiedenen Softwareoptionen. Eine der häufigsten Inkonsistenzen besteht darin, wie diese Browser standardmäßig Ränder, Auffüllungen und Ränder berechnen.

Da sich diese Aspekte des Boxmodells auf alle HTML-Elemente auswirken und für die Erstellung von Seiten unerlässlich sind Layouts bedeutet eine inkonsistente Anzeige, dass eine Seite in einem Browser gut aussieht, aber in Ein weiterer. Um dieses Problem zu bekämpfen, normalisieren viele Webdesigner diese Aspekte des Boxmodells. Diese Praxis ist auch bekannt als ausnullieren die Werte für Margen, Polsterung, und Grenzen.

Ein Hinweis zu den Browser-Standardeinstellungen

Webbrowser legen jeweils Standardeinstellungen für bestimmte Anzeigeaspekte einer Seite fest. Hyperlinks sind beispielsweise standardmäßig blau und unterstrichen. Dieses Verhalten ist in verschiedenen Browsern konsistent, und obwohl es etwas ist, das die meisten Designer ändern, um es dem Design anzupassen Anforderungen ihres spezifischen Projekts, die Tatsache, dass sie alle mit den gleichen Standardeinstellungen beginnen, macht es einfacher, diese zu erstellen Änderungen. Leider weist der Standardwert für Ränder, Auffüllung und Rahmen nicht das gleiche Maß an browserübergreifender Konsistenz auf.