Nollaa marginaalit ja reunat CSS: n avulla

Tässä artikkelissa kerrotaan kuinka käyttää CSS nollata marginaalit ja reunukset niin, että verkkosivusi hahmontuvat tasaisesti kaikissa selaimissa.

Reunusten ja pehmusteen arvojen normalisointi

Paras tapa ratkaista epäjohdonmukaisen laatikkomallin ongelma on asettaa kaikki HTML-elementtien marginaalit ja täyttöarvot nollaksi. Voit tehdä tämän muutamalla tavalla lisäämällä tämä CSS-sääntö tyylitaulukkoon:

Vaikka tämä sääntö on epäspesifinen, koska se on ulkoisessa tyylitaulukossasi, sillä on suurempi spesifisyys kuin selaimen oletusarvoilla. Koska nämä oletusarvot ovat mitä korvaat, tämä yksi tyyli saavuttaa sen, mitä aiot tehdä.

Kun olet poistanut kaikki marginaalit ja pehmusteet käytöstä, sinun on kytkettävä ne takaisin valikoivasti takaisin tiettyihin verkkosivusi osiin, jotta saavutat ulkoasun, jota muotoilu vaatii.

Normalisoi reunat CSS: n avulla

Vanhemmat Internet Explorerin versiot

oli läpinäkyvä tai näkymätön raja elementtien ympärillä. Ellet aseta reunukseksi 0, se voi häiritä sivujesi asetteluja. Jos olet päättänyt jatkaa näiden vanhentuneiden IE-versioiden tukemista, sinun on puututtava tähän lisäämällä seuraava kehoosi ja HTML-tyyleihisi:

HTML, body {
marginaali: 0px;
pehmuste: 0px;
 reunus: 0px;
}

Samalla tavalla kuin sammutit marginaalit ja täytteen, tämä uusi tyyli poistaa myös oletusreunukset käytöstä. Voit myös tehdä saman asian käyttämällä jokerimerkin valitsinta, joka on esitetty aiemmin artikkelissa.

Miksi johdonmukaiset marginaalit ja reunat vaikuttavat verkkosivujen suunnitteluun

Tämän päivän verkkoselain on kulkenut kaukana hulluista päivistä, jolloin kaikenlainen selainten välinen johdonmukaisuus oli toiveajattelua. Nykypäivän selaimet ovat täysin standardien mukaisia. He pelaavat hienosti yhdessä ja tarjoavat melko yhdenmukaisen sivunäytön eri selaimissa. Tämä sisältää uusimmat Google Chrome-, Microsoft Edge-, Mozilla Firefox-, Opera-, Safari- ja eri selaimetlukemattomia mobiililaitteita pääsy verkkosivustoille tänään.

Vaikka selainten näyttämisessä CSS: ää on varmasti edistytty, näiden ohjelmistovaihtoehtojen välillä on edelleen epäjohdonmukaisuuksia. Yksi yleisimmistä epäjohdonmukaisuuksista on se, kuinka nämä selaimet laskevat marginaalit, täytteen ja reunukset oletuksena.

Koska nämä laatikkomallin piirteet vaikuttavat kaikkiin HTML-elementteihin ja koska ne ovat välttämättömiä sivun luomisessa asettelut, epäjohdonmukainen näyttö tarkoittaa, että sivu voi näyttää hyvältä yhdessä selaimessa, mutta näyttää hieman sivulta toinen. Tämän ongelman torjumiseksi monet web-suunnittelijat normalisoivat nämä laatikkomallin näkökohdat. Tämä käytäntö tunnetaan myös nimellä nollaaminen marginaalien arvot, pehmusteja rajat.

Huomautus selaimen oletusasetuksista

Jokainen verkkoselain asettaa oletusasetukset tietyille sivun näyttökohteille. Esimerkiksi hyperlinkit ovat oletusarvoisesti sinisiä ja alleviivattuja. Tämä käyttäytyminen on yhdenmukaista useissa selaimissa, ja vaikka useimmat suunnittelijat muuttavatkin sen sopivaksi malliin niiden erityistarpeiden saavuttamiseksi, se, että he kaikki aloittavat samoilla oletusarvoilla, helpottaa näiden tekemistä muutoksia. Valitettavasti marginaalien, täytteiden ja reunusten oletusarvo ei ole samalla tasolla selainten välisessä johdonmukaisuudessa.