Paggamit sa CSS sa Zero Out Your Margins and Borders

Ang web browser karon nga adlaw naggikan sa mga adlaw sa pagkabuang diin ang bisan unsa nga matang sa cross-browser consistency mao ang pangandoy nga panghunahuna. Ang mga web browsers karon tanan nga mga sukaranan-nagsunod. Nagdula sila nga maayo nga dula ug naghatag og usa ka patas nga piho nga display sa pahina sa lainlaing mga browser. Kini naglakip sa pinakabag-o nga bersyon sa Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, ug ang lainlaing mga browser nga makita sa daghang mga mobile device nga gigamit sa pag-access sa website karon.

Bisan tuod nga ang pag-uswag sa pagkatinuod gihimo sa mga web browser ug kung giunsa nila pagpakita ang CSS, aduna pay mga panagsumpaki tali niining nagkalain-laing mga kapilian sa software. Ang usa sa kasagaran nga mga panagsumpaki mao kon giunsa nga kini nga mga browser nagbanabana sa mga gilapdon, padding, ug mga utlanan pinaagi sa default.

Tungod niining mga aspeto sa modelo sa kahon nga nag-epekto sa tanan nga mga elemento sa HTML, ug tungod kay kini mahinungdanon sa paghimo sa mga pahina sa mga panid, usa ka panagsama nga pasundayag nagpasabot nga ang usa ka panid mahimong nindot tan-awon sa usa ka browser, apan tan-awon nga gamay sa lain. Aron mabuntog kini nga problema, daghang mga tigdisenyo sa web mag-normalize niining mga aspeto sa modelo sa kahon. Kini nga praktis gitawag usab nga "zeroing out" ang mga bili alang sa margins, padding, ug mga utlanan.

Usa ka Pahinumdom sa Default nga Browser

Ang tanan nga mga web browser adunay mga default nga setting alang sa pipila nga mga aspeto sa pagpakita sa usa ka pahina. Pananglitan, ang mga hyperlinks asul ug gibutang ubos sa default. Kini kanunay nga makita sa nagkalain-laing mga browsers, ug bisan kini usa ka butang nga mausab sa kadaghanan sa mga tigdisenyo aron mahiangay ang mga kinahanglanon sa disenyo sa ilang piho nga proyekto, ang kamatuoran nga ang tanan nagsugod sa sama nga mga pagpaubos nagpasayon ​​sa paghimo niini nga mga pagbag-o. Ikasubo, ang default nga bili alang sa mga margin, padding, ug mga utlanan dili makatagamtam sa sama nga ang-ang sa cross-browser consistency.

Pagbag-o sa mga Prinsipyo alang sa mga margin ug Padding

Ang pinakamaayong paagi sa pagsulbad sa suliran sa dili magkaparehong kahon nga modelo mao ang pagtakda sa tanan nga mga margin ug padding nga mga bili sa mga elemento sa HTML ngadto sa zero. Adunay pipila ka mga paagi nga mahimo nimo kini mao ang pagdugang niining paghari sa CSS sa imong stylesheet:

* (margin: 0; padding: 0; }

Kining CSS rule naggamit sa * o wildcard nga karakter. Kana nga kinaiya nagpasabot nga "tanan nga mga elemento" ug kini sa batakang pagpili sa matag elemento sa HTML ug ipahimutang ang mga margin ug padding ngadto sa 0. Bisan pa kini nga lagda dili kaayo piho, tungod kay kini anaa sa imong external stylesheet, kini adunay mas taas nga pagkatukma kay sa default browser ang mga prinsipyo. Tungod kay kadtong mga default mao ang imong gipasagdan, kining usa ka estilo mohimo sa imong gipangbuhat.

Ang laing kapilian mao ang paggamit niini nga mga hiyas sa mga elemento sa HTML ug sa lawas. Tungod kay ang tanan nga mga elemento sa imong panid mahimong mga anak niining duha ka mga elemento, ang CSS cascade kinahanglan nga magamit kining mga hiyas sa tanan nga uban nga mga elemento.

html, lawas {margin: 0; padding: 0; }

Kini magsugod sa imong desinyo sa usa ka dapit sa tanan nga mga browser, apan ang usa ka butang nga hinumduman mao nga sa higayon nga imong ibalik ang tanan nga mga margin ug padding, imong gikinahanglan nga mapili kini sa tukma nga bahin sa imong web page aron makab-ot ang hitsura ug mobati nga gikinahanglan ang imong desinyo.

Mga utlanan

Tingali ikaw naghunahuna "apan walay mga browsers adunay utlanan libut sa elemento sa lawas sa default". Dili kini tinuod. Ang daan nga bersyon sa Internet Explorer adunay usa ka transparent o dili makita nga utlanan sa palibot sa mga elemento. Gawas kon imong ibutang ang utlanan sa 0, kana nga utlanan makadaot sa imong mga layout sa pahina. Kung nakahukom ka nga ikaw magpadayon sa pagsuporta niining mga kinaraan nga mga bersyon sa IE, imong gikinahanglan ang pagsulbad niini pinaagi sa pagdugang sa mosunod sa imong lawas ug mga estilo sa HTML:

HTML, lawas {
kilid: 0px;
padding: 0px;
utlanan: 0px;
}

Sama sa kung unsa ang imong pagpalong sa mga panapton ug padding, kining bag-ong estilo usab mopalong sa mga utlanan sa default. Mahimo usab nimo ang pagbuhat sa sama nga butang pinaagi sa paggamit sa wildcard nga tigpili nga gipakita sa sayo pa sa artikulo.

Ang orihinal nga artikulo ni Jennifer Krynin. Gi-edit ni Jeremy Girard sa 9/27/16.