Današnji web pregledač dolazi dug put od ludih dana kada je bilo kakva konzistentnost između čitavog pretraživača bila fantastično razmišljanje. Današnji web preglednici su svi vrlo usklađeni sa standardima. Oni igraju lepo zajedno i pružaju prilično konzistentan prikaz stranica preko različitih pregledača. Ovo uključuje najnovije verzije Google Chrome-a, Microsoft Edge-a, Mozilla Firefox-a, Opera-a, Safari-a i različitih pregledača pronađenih na nebrojenim mobilnim uređajima koji se koriste za pristup veb lokaciji danas.
Iako je napredak sigurno postignut kada su u pitanju web pretraživači i kako oni prikazuju CSS, još uvijek postoje nedoslednosti između ovih različitih softverskih opcija. Jedna od uobičajenih nedoslednosti je način na koji ovi pretraživači podrazumevano izračunavaju margine, padding i granice.
Zbog ovih aspekata kutijskog modela utiču na sve HTML elemente i zato što su suštinski u kreiranju postavki stranice, nekonzistentni prikaz znači da stranica može izgledati sjajno u jednom pretraživaču, ali u nekom drugom pogledu malo izgledati. Za suzbijanje ovog problema, mnogi web dizajneri normalizuju ove aspekte modela kutije. Ova praksa je poznata i kao "nulti izlaz" vrednosti za margine, padding i granice.
Napomena o podrazumevanim podacima pretraživača
Web pretraživači imaju podrazumevane postavke za određene aspekte prikaza stranice. Na primjer, hiperveze su plave i podvučene po defaultu. Ovo je konzistentno u različitim pregledačima, iako je to nešto što se većina dizajnera menja kako bi odgovarala projektnim potrebama njihovog specifičnog projekta, činjenica da svi počinju sa istim podrazumevanjima olakšava ove promjene. Nažalost, podrazumevana vrednost za margine, padding i granice ne uživa isti nivo unakrsnog pretraživača.
Normiranje vrednosti za margine i padding
Najbolji način rešavanja problema nedoslednog modela kutije je postaviti sve margine i padding vrednosti HTML elementa na nulu. Postoji nekoliko načina na koji možete to učiniti je da dodate ovo CSS pravilo u svoj stil stilova:
* {margin: 0; padding: 0; }Ovo CSS pravilo koristi znak * ili džoker. Taj karakter označava "sve elemente" i biće u osnovi izabrao svaki HTML element i postavio margine i padding na 0. Iako je ovo pravilo vrlo nespecificirano, jer je u vašoj spoljnoj listi stilova, on će imati veću specifičnost od podrazumevanog pretraživača vrijednosti. Pošto su ta podrazumevana vrednost ono što prepisujete, ovaj jedan stil će postići ono što želite.
Druga mogućnost je primjena ovih vrijednosti na HTML i elemente tela. Pošto će svi ostali elementi na vašoj stranici biti djeca ova dva elementa, CSS kaskada bi trebala primijeniti ove vrijednosti na sve te druge elemente.
html, tijelo {margin: 0; padding: 0; }Ovo će započeti vaš dizajn na istom mestu na svim pretraživačima, ali jedna stvar koju treba zapamtiti je da kada jednom okrenete sve marže i padding, morate ih selektivno ponovo uključiti za određene dijelove vaše web stranice kako biste postigli izgled i osećate da vaš dizajn zahteva.
Granice
Možda razmišljate "ali nijedan pretraživač po defaultu nema granicu oko elementa tijela". Ovo nije striktno tačno. Starije verzije Internet Explorer-a imaju transparentnu ili nevidljivu ivicu oko elemenata. Osim ako ne podesite granicu na 0, ta granica može zabrinuti izglede stranice. Ako ste odlučili da ćete nastaviti da podržavate ove zastarele verzije IE-a, moraćete da odgovorite na ovo dodavanjem sledećih stilova tela i HTML-a:
HTML, body {
margin: 0px;
padding: 0px;
granica: 0px;
}
Slično kao što ste isključili margine i padding, ovaj novi stil će takođe isključiti podrazumevane granice. Takođe možete uraditi istu stvar koristeći selektor selektora koji je ranije prikazan u članku.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 27.9.16.