Uporabite CSS, da izravnate svoje robove in meje

click fraud protection

Kaj vedeti

  • V slog s CSS dodajte pravilo, ki nastavi vse robove in vrednosti oblazinjenja elementov HTML na nič.

Ta članek razlaga, kako uporabljati CSS na nič marže in obrobe, tako da se vaše spletne strani dosledno upodabljajo v vseh brskalnikih.

Normaliziranje vrednosti za robove in oblazinjenje

Najboljši način za rešitev problema nedoslednega modela škatle je, da nastavite na vse robove in vrednosti oblazinjenja elementov HTML nič. To lahko storite na nekaj načinov, če dodate to pravilo CSS v svoj slog:


Čeprav je to pravilo nespecifično, ker je v vašem zunanjem slogovnem listu, bo imelo večjo specifičnost kot privzete vrednosti brskalnika. Ker te privzete vrednosti prepisujete, bo s tem enim slogom doseženo, kar si nameravate.

Ko izklopite vse robove in oblazinjenje, jih boste morali selektivno znova vklopiti za določene dele vaše spletne strani, da boste dosegli videz in občutek, ki ga zahteva vaš dizajn.

Uporabite CSS za normalizacijo meja

Starejši različice Internet Explorerja

instagram viewer
imel prozorno ali nevidno obrobo okoli elementov. Če meje ne nastavite na 0, lahko ta obroba pokvari postavitve strani. Če ste se odločili, da boste še naprej podpirali te zastarele različice IE, boste to morali odpraviti tako, da boste svojemu slogu telesa in HTML dodali naslednje:

HTML, telo {
marža: 0px;
oblazinjenje: 0px;
obroba: 0px;
}

Podobno kot ste izklopili robove in oblazinjenje, bo tudi ta novi slog izklopil privzete meje. Enako bi lahko storili tudi z izbirnikom nadomestnih znakov, prikazanim prej v članku.

Zakaj so pri spletnem oblikovanju pomembne dosledne robove in meje

Današnji spletni brskalnik je daleč od norih dni, ko je bila kakršna koli doslednost med brskalniki zaželena. Današnji spletni brskalniki so v celoti skladni s standardi. Lepo se igrata in zagotavljata dokaj dosleden prikaz strani v različnih brskalnikih. Sem spadajo najnovejše različice brskalnikov Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari in različni brskalniki, ki jih najdete nanešteto mobilnih naprav dostop do spletnih mest danes.

Čeprav je bil napredek pri tem, kako brskalniki prikazujejo CSS, vsekakor dosežen, še vedno obstajajo neskladja med različnimi možnostmi programske opreme. Ena najpogostejših nedoslednosti je, kako ti brskalniki privzeto izračunajo robove, obloge in obrobe.

Ker ti vidiki modela škatle vplivajo na vse elemente HTML in ker so bistveni pri ustvarjanju strani postavitve, nedosleden prikaz pomeni, da je stran v enem brskalniku lahko videti odlično, v notranjosti pa videti nekoliko stran drugo. Za boj proti tej težavi mnogi spletni oblikovalci normalizirajo te vidike modela škatle. Ta praksa je znana tudi kot izničenje vrednosti za marže, oblazinjenjein meje.

Opomba o privzetih nastavitvah brskalnika

Vsak spletni brskalnik nastavi privzete nastavitve za določene vidike strani. Hiperpovezave so na primer privzeto modre in podčrtane. Takšno vedenje je v različnih brskalnikih dosledno in čeprav se večina oblikovalcev spreminja, da ustreza dizajnu potrebe njihovega specifičnega projekta, dejstvo, da vsi začenjajo z enakimi privzetimi nastavitvami, jih olajša spremembe. Na žalost privzeta vrednost za robove, oblazinjenje in obrobe nima enake doslednosti med brskalniki.

instagram story viewer