Hvad man skal vide
- Føj en regel til dit CSS-stilark, der sætter alle margener og polstringsværdier for HTML-elementer til nul.
Denne artikel forklarer, hvordan man bruger CSS til nul ud margener og grænser op, så dine websider gengives konsekvent i enhver browser.
Normalisering af værdier for margener og polstring
Den bedste måde at løse problemet med en inkonsekvent boksmodel på er at indstille alle margener og polstringsværdier for HTML-elementer til nul. Der er et par måder, du kan gøre dette på er at tilføje denne CSS-regel til dit typografiark:
Selvom denne regel er uspecifik, fordi den findes i dit eksterne stilark, vil den have en højere specificitet end standardbrowserværdierne. Da disse standarder er det, du overskriver, vil denne ene stil udrette, hvad du vil.
Når du har slået alle margener og polstring fra, skal du selektivt tænde dem igen for bestemte dele af din webside for at opnå det udseende og den fornemmelse, som dit design kræver.
Brug CSS til at normalisere grænser
Ældre versioner af Internet Explorer havde en gennemsigtig eller usynlig grænse omkring elementer. Medmindre du sætter grænsen til 0, kan grænsen ødelægge dine sidelayouts. Hvis du har besluttet, at du fortsat vil understøtte disse forældede versioner af IE, skal du løse dette ved at tilføje følgende til din krops- og HTML-typografi:
HTML, body {
margen: 0px;
polstring: 0px;
kant: 0px;
}
Svarende til hvordan du slukkede margenerne og polstringen, vil denne nye stil også slå standardgrænser fra. Du kan også gøre det samme ved at bruge jokertegnvælgeren, der er vist tidligere i artiklen.
Hvorfor konsekvente margener og grænser betyder noget i webdesign
Dagens webbrowser er kommet langt fra de skøre dage, hvor enhver form for konsistens på tværs af browsere var ønsketænkning. Dagens webbrowsere overholder alle standarder. De spiller pænt sammen og leverer en ret konsekvent sidevisning på tværs af de forskellige browsere. Dette inkluderer de nyeste versioner af Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari og de forskellige browsere, der findes påde utallige mobile enheder adgang til websteder i dag.
Mens der bestemt er gjort fremskridt med, hvordan browsere viser CSS, er der stadig uoverensstemmelser mellem disse forskellige softwaremuligheder. En af de almindelige uoverensstemmelser er, hvordan disse browsere som standard beregner margener, polstring og kanter.
Fordi disse aspekter af boksmodellen påvirker alle HTML-elementer, og fordi de er afgørende for oprettelse af side layout, betyder en inkonsekvent skærm, at en side kan se godt ud i en browser, men se lidt ud en anden. For at bekæmpe dette problem normaliserer mange webdesignere disse aspekter af boksmodellen. Denne praksis er også kendt som nulstilling værdierne for margener, polstringog grænser.
En note om standardindstillinger for browser
Webbrowsere indstiller hver for sig standardindstillinger for visse visningsaspekter på en side. For eksempel er hyperlinks blå og understregede som standard. Denne adfærd er konsistent på tværs af forskellige browsere, og selvom det er noget, som de fleste designere ændrer for at passe til designet behov for deres specifikke projekt, det faktum, at de alle starter med de samme standardindstillinger, gør det lettere at foretage disse ændringer. Desværre nyder standardværdien for margener, polstring og kanter ikke det samme niveau af konsistens på tværs af browsere.