Använd CSS för att nollställa dina marginaler och gränser

Den här artikeln förklarar hur man använder CSS till noll ut marginaler och gränser så att dina webbsidor återges konsekvent i varje webbläsare.

Normalisering av värden för marginaler och vaddering

Det bästa sättet att lösa problemet med en inkonsekvent rutamodell är att ställa in alla marginaler och utfyllnadsvärden för HTML-element till noll. Det finns några sätt att göra detta är att lägga till den här CSS-regeln i ditt formatmall:

Även om denna regel är ospecifik, eftersom den finns i ditt externa formatmall, kommer den att ha en högre specificitet än standardwebbläsarvärdena. Eftersom dessa standardinställningar är vad du skriver över kommer den här stilen att uppnå det du tänker göra.

När du har inaktiverat alla marginaler och vaddering måste du selektivt slå på dem igen för specifika delar av din webbsida för att uppnå det utseende och känsla som din design kräver.

Använd CSS för att normalisera gränser

Äldre versioner av Internet Explorer hade en transparent eller osynlig gräns runt element. Såvida du inte ställer in gränsen till 0 kan den gränsen förstöra dina sidlayouter. Om du har bestämt dig för att fortsätta att stödja dessa föråldrade versioner av IE måste du ta itu med detta genom att lägga till följande i din kropps- och HTML-stil:

HTML, body {
marginal: 0px;
stoppning: 0px;
 gräns: 0px;
}

På samma sätt som hur du stängde av marginalerna och stoppningen, kommer den här nya stilen också att stänga av standardgränser. Du kan också göra samma sak genom att använda jokerteckenväljaren som visas tidigare i artikeln.

Varför konsekventa marginaler och gränser spelar roll i webbdesign

Dagens webbläsare har kommit långt från de galna dagarna där någon form av konsistens över webbläsare var önsketänkande. Dagens webbläsare uppfyller helt standarderna. De spelar bra tillsammans och levererar en ganska konsekvent sidvisning i olika webbläsare. Detta inkluderar de senaste versionerna av Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari och de olika webbläsare som finns påde otaliga mobila enheterna åtkomst till webbplatser idag.

Även om framsteg verkligen har gjorts med hur webbläsare visar CSS, finns det fortfarande inkonsekvenser mellan dessa olika programalternativ. En av de vanligaste inkonsekvenserna är hur dessa webbläsare beräknar marginaler, vaddering och gränser som standard.

Eftersom dessa aspekter av boxmodellen påverkar alla HTML-element, och eftersom de är väsentliga för att skapa sidan layouter, en inkonsekvent visning innebär att en sida kan se bra ut i en webbläsare, men ser lite av i annan. För att bekämpa detta problem normaliserar många webbdesigners dessa aspekter av boxmodellen. Denna praxis är också känd som nollställning värdena för marginaler, stoppningoch gränser.

En anmärkning om webbläsarinställningar

Webbläsare anger var och en standardinställningar för vissa visningsaspekter på en sida. Till exempel är hyperlänkar blå och understrukna som standard. Detta beteende är konsekvent i olika webbläsare, och även om det är något som de flesta designers ändrar för att passa designen det specifika projektets behov, det faktum att de alla börjar med samma standardvärden gör det lättare att göra dessa ändringar. Tyvärr har standardvärdet för marginaler, utfyllnad och gränser inte samma nivå av webbläsarkonsistens.