Koristite CSS za poništavanje margina i granica

click fraud protection

Što znati

  • Dodajte pravilo u CSS tablicu stilova koje postavlja sve margine i vrijednosti dodavanja HTML elemenata na nulu.

Ovaj članak objašnjava kako koristiti CSS na nulu marže i obrube tako da se vaše web stranice dosljedno prikazuju u svakom pregledniku.

Normaliziranje vrijednosti za margine i padding

Najbolji način za rješavanje problema nedosljednog modela okvira je postavljanje svih margina i dopunskih vrijednosti HTML elemenata na nulu. Postoji nekoliko načina na koje biste to mogli učiniti tako da dodate ovo CSS pravilo u svoju tablicu stilova:


Iako je ovo pravilo nespecifično, jer se nalazi u vašem vanjskom listu stilova, ono će imati veću specifičnost od zadanih vrijednosti preglednika. Budući da su zadane vrijednosti ono što prepisujete, ovaj će stil postići ono što namjeravate učiniti.

Nakon što isključite sve margine i dodavanje, morat ćete ih selektivno ponovo uključiti za određene dijelove web stranice kako biste postigli izgled i osjećaj koji vaš dizajn zahtijeva.

Koristite CSS za normalizaciju granica

instagram viewer

Starije verzije Internet Explorera imao prozirnu ili nevidljivu granicu oko elemenata. Ako granicu ne postavite na 0, ona može pokvariti raspored stranica. Ako ste odlučili da ćete i dalje podržavati ove zastarjele verzije IE-a, morat ćete to riješiti dodavanjem sljedećeg u svoje tijelo i HTML stilove:

HTML, tijelo {
marža: 0px;
popunjavanje: 0px;
obrub: 0px;
}

Slično onome kako ste isključili margine i dodavanje, ovaj novi stil također će isključiti zadane granice. Isto biste mogli učiniti i pomoću zamjenskog birača prikazanog ranije u članku.

Zašto su dosljedne margine i granice važne u web dizajnu

Današnji web preglednik daleko je odmakao od ludih dana kada je bilo koja vrsta dosljednosti više preglednika bila željno razmišljanje. Današnji web preglednici u potpunosti su u skladu sa standardima. Lijepo se igraju i pružaju prilično dosljedan prikaz stranica u različitim preglednicima. To uključuje najnovije verzije preglednika Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari i razne preglednike koji se nalaze nabezbroj mobilnih uređaja pristup web stranicama danas.

Iako je sigurno postignut napredak u načinu na koji preglednici prikazuju CSS, još uvijek postoje nedosljednosti između ovih različitih softverskih opcija. Jedna od čestih nedosljednosti je kako ti preglednici prema zadanim postavkama izračunavaju margine, popunjavanje i obrube.

Budući da ovi aspekti modela okvira utječu na sve HTML elemente i zato što su oni ključni u stvaranju stranice izgleda, nedosljedan prikaz znači da stranica može izgledati sjajno u jednom pregledniku, ali izgleda malo odvojeno u još. Da bi se borili protiv ovog problema, mnogi web dizajneri normaliziraju ove aspekte modela kutija. Ova je praksa poznata i pod nazivom nuliranje vrijednosti marži, podmetanje, i granice.

Napomena o zadanim postavkama preglednika

Svaki web preglednik postavlja zadane postavke za određene aspekte prikaza stranice. Na primjer, hiperveze su prema zadanim postavkama plave i podcrtane. Ovakvo ponašanje konzistentno je u različitim preglednicima, i premda je to nešto što većina dizajnera mijenja u skladu s dizajnom potrebe njihovog specifičnog projekta, činjenica da svi počinju s istim zadanim postavkama olakšava njihovo stvaranje promjene. Nažalost, zadane vrijednosti margina, umotavanja i obruba ne uživaju istu razinu dosljednosti više preglednika.

instagram story viewer