Gamitin ang CSS sa Zero Out Your Margins and Borders

Ang web browser ng araw na ito ay dumating sa isang mahabang paraan mula sa mga nakatutuwang araw kung saan ang anumang uri ng cross-browser na pare-pareho ay naghangad na pag-iisip. Ang mga web browser sa araw na ito ay lahat ng mga pamantayan na sumusunod. Naglalaro sila ng mabuti at naghahatid ng isang pantay na pare-parehong display ng pahina sa iba't ibang mga browser. Kabilang dito ang pinakabagong mga bersyon ng Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, at iba't ibang mga browser na natagpuan sa napakaraming bilang ng mga aparatong mobile na ginagamit upang ma-access ang website ngayon.

Bagama't tiyak na nagawa ang pag-unlad pagdating sa mga web browser at kung paano sila nagpapakita ng CSS, mayroong mga hindi pagkakapare-pareho sa pagitan ng iba't ibang mga opsyon ng software na ito. Ang isa sa mga karaniwang hindi pagkakapare-pareho ay kung paano kinakalkula ng mga browser ang mga margin, padding, at mga hangganan sa pamamagitan ng default.

Dahil sa mga aspeto ng modelo ng kahon na nakakaapekto sa lahat ng mga elemento ng HTML, at dahil mahalaga ang mga ito sa paglikha ng mga layout ng pahina, ang isang hindi pantay na display ay nangangahulugan na ang isang pahina ay maaaring mukhang mahusay sa isang browser, ngunit tumingin nang bahagya sa iba. Upang labanan ang problemang ito, maraming mga taga-disenyo ng web ay normalize ang mga aspeto ng modelo ng kahon. Ang pagsasanay na ito ay kilala rin bilang "zeroing out" ang mga halaga para sa mga margin, padding, at mga hangganan.

Isang Paalala sa Default na Browser

Ang lahat ng mga web browser ay may mga default na setting para sa ilang mga aspeto ng display ng isang pahina. Halimbawa, ang mga hyperlink ay asul at binibigyang-diin ng default. Ito ay pare-pareho sa iba't ibang mga browser, at bagaman ito ay isang bagay na ang karamihan sa mga designer ay nagbabago upang maging angkop sa mga pangangailangan sa disenyo ng kanilang partikular na proyekto, ang katotohanan na ang lahat ng ito ay nagsisimula sa parehong mga default na ginagawang mas madali upang gawin ang mga pagbabagong ito. Nakalulungkot, ang default na halaga para sa mga gilid, padding, at mga hangganan ay hindi nasiyahan sa parehong antas ng pagkakapare-pareho ng cross-browser.

Normalize ang Mga Halaga para sa Mga Margin at Padding

Ang pinakamahusay na paraan upang malutas ang problema ng hindi pantay na kahon modelo ay upang itakda ang lahat ng mga gilid at padding halaga ng mga elemento ng HTML sa zero. Mayroong ilang mga paraan na maaari mong gawin ito ay upang idagdag ang rule CSS na ito sa iyong stylesheet:

* {margin: 0; padding: 0; }

Ang panuntunan ng CSS ay gumagamit ng * o wildcard na character. Ang karakter na iyon ay nangangahulugang "lahat ng elemento" at ito ay karaniwang piliin ang bawat elemento ng HTML at itakda ang mga gilid at padding sa 0. Kahit na ang panuntunang ito ay hindi tiyak, dahil sa iyong panlabas na stylesheet, magkakaroon ito ng mas mataas na pagtitiyak kaysa sa default na browser ginagawa ang mga halaga. Dahil ang mga default na iyon ay kung ano ang iyong pinapatungan, ang estilo ng isang ito ay magagawa kung ano ang iyong ginagawa.

Ang isa pang pagpipilian ay ang paggamit ng mga halagang ito sa mga elemento ng HTML at katawan. Dahil ang lahat ng iba pang mga elemento sa iyong pahina ay magiging mga anak ng dalawang elementong ito, ang cascade ng CSS ay dapat mag-aplay sa mga halagang ito sa lahat ng iba pang mga elemento.

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

Ito ay magsisimula ng iyong disenyo sa parehong lugar sa lahat ng mga browser, ngunit isang bagay na dapat tandaan ay na sa sandaling i-on mo ang lahat ng mga gilid at padding off, kakailanganin mong piliin ang mga ito pabalik sa para sa partikular na mga bahagi ng iyong web page upang makamit ang hitsura at pakiramdam na ang iyong disenyo ay tumatawag.

Mga hangganan

Maaari kang mag-iisip "ngunit walang mga browser na may hangganan sa paligid ng elemento ng katawan bilang default". Ito ay hindi mahigpit na totoo. Ang mga mas lumang bersyon ng Internet Explorer ay may isang transparent o invisible na hangganan sa paligid ng mga elemento. Maliban kung itinakda mo ang hangganan sa 0, ang hangganan na iyon ay maaaring magulo sa iyong mga layout ng pahina. Kung napagpasyahan mo na patuloy mong suportahan ang mga lumang bersyon ng IE, kakailanganin mong tugunan ito sa pamamagitan ng pagdaragdag ng mga sumusunod sa iyong mga estilo ng katawan at HTML:

HTML, katawan {
margin: 0px;
padding: 0px;
hangganan: 0px;
}

Katulad ng kung paano mo pinatay ang mga gilid at padding, i-off din ang bagong estilo na ito ng default na mga hangganan. Maaari mo ring gawin ang parehong bagay sa pamamagitan ng paggamit ng tagapili ng wildcard na ipinakita nang mas maaga sa artikulo.

Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 9/27/16.