Bruk CSS til å nullstille marginene og kantene

Hva du skal vite

  • Legg til en regel i CSS-stilarket ditt som setter alle margene og utfyllingsverdiene til HTML-elementer til null.

Denne artikkelen forklarer hvordan du bruker CSS til null ut marginer og grenser slik at websidene dine gjengis konsekvent i alle nettlesere.

Normalisering av verdier for marginer og polstring

Den beste måten å løse problemet med en inkonsekvent boksmodell er å sette alle margene og polstringsverdiene til HTML-elementer til null. Det er noen måter du kan gjøre dette på er å legge til denne CSS-regelen i stilarket ditt:


Selv om denne regelen er uspesifikk, fordi den er i det eksterne stilarket, vil den ha høyere spesifisitet enn standard nettleserverdier. Siden disse standardene er det du overskriver, vil denne stilen oppnå det du bestemmer deg for å gjøre.

Når du har slått av alle margene og polstringen, må du slå dem på igjen for bestemte deler av websiden din for å oppnå det utseendet og følelsen designen krever.

Bruk CSS til å normalisere grenser

Eldre

instagram viewer
versjoner av Internet Explorer hadde en gjennomsiktig eller usynlig grense rundt elementer. Med mindre du setter grensen til 0, kan den kanten ødelegge sidelayoutene dine. Hvis du har bestemt deg for at du vil fortsette å støtte disse antikke versjonene av IE, må du løse dette ved å legge til følgende i kropps- og HTML-stilene:

HTML, body {
margin: 0px;
polstring: 0px;
grense: 0px;
}

I likhet med hvordan du slo av margene og polstringen, vil denne nye stilen også slå av standardgrenser. Du kan også gjøre det samme ved å bruke jokertegnvelgeren som er vist tidligere i artikkelen.

Hvorfor konsekvente marginer og grenser har betydning for nettdesign

Dagens nettleser har kommet langt fra de sprø dagene hvor enhver form for konsistens på tvers av nettlesere var ønsketenking. Dagens nettlesere er i full overensstemmelse med standardene. De spiller pent sammen og leverer en ganske jevn sidevisning på tvers av de forskjellige nettleserne. Dette inkluderer de nyeste versjonene av Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari og de forskjellige nettleserne som finnes påde utallige mobile enhetene tilgang til nettsteder i dag.

Mens det absolutt er gjort fremgang med hvordan nettlesere viser CSS, er det fortsatt uoverensstemmelser mellom disse forskjellige programvarealternativene. En av de vanlige inkonsekvensene er hvordan disse nettleserne beregner marginer, polstring og grenser som standard.

Fordi disse aspektene av boksmodellen påvirker alle HTML-elementer, og fordi de er essensielle for å lage side layouter, betyr en inkonsekvent visning at en side kan se bra ut i en nettleser, men se litt utenfor en annen. For å bekjempe dette problemet normaliserer mange webdesignere disse aspektene av boksmodellen. Denne praksisen er også kjent som nullstille ut verdiene for marginer, polstring, og grenser.

En merknad om nettleserstandarder

Nettlesere angir hver sin standardinnstilling for visse visningsaspekter på en side. For eksempel er hyperkoblinger blå og understreket som standard. Denne oppførselen er jevn over forskjellige nettlesere, og selv om det er noe de fleste designere endrer for å passe designet behovene til deres spesifikke prosjekt, det faktum at de alle begynner med de samme standardene, gjør det lettere å lage disse Endringer. Dessverre nyter ikke standardverdien for marginer, polstring og grenser det samme nivået av konsistens mellom nettlesere.

instagram story viewer