Sebenzisa i-CSS kwi-Zero Out of Your Margins and Borders

Isibhengezo sewebhu sa namhlanje sifike endleleni ende ukusuka kwiintsuku eziphosa apho kukho nawuphi na uhlobo lwesigqithiso sokuphambana nomnqweno. Iiphequluli zewebhu zanamhlanje zonke ziyimilinganiselo. Zidlala ngokudibeneyo kwaye zihambisa ukuboniswa kwekhasi elifanelekileyo kwii-browser ezahlukeneyo. Oku kubandakanya iinguqu zakutsha zeGoogle Chrome, iMicrosoft Edge, i-Mozilla Firefox, i-Opera, i-Safari, kunye nee-browser ezihlukeneyo ezifunyenwe kwizinto ezininzi eziphathekayo ezisetyenziselwa ukufikelela kwiwebhusayithi namhlanje.

Nangona i nkqubela iyenziwe ngokuqinisekileyo xa kuziwa kwiiphequluli zewebhu kunye nendlela ababonisa ngayo iCSS, kukho ukungahambisani phakathi kwezi zixhobo ezahlukeneyo zeekhompyutha. Enye yezinto ezingavumelaniyo eziqhelekileyo yindlela ezo ziphequluli zibala ngayo imida, i-padding, kunye nemida ngokusilelayo.

Ngenxa yale miba yomzekelo webhokisi yempembelelo zonke izinto ze-HTML, kwaye ngenxa yokuba zibalulekile ekudaleni i-page layouts, ukubonisa okungahambelani kuthetha ukuba iphepha liyakubonakala likhulu kwisiphequluli esinye, kodwa jonga kancane kwenye. Ukulwa nale ngxaki, abaninzi abenzi bewebhu baqulunqa le miba yebhokisi yebhokisi. Lo mkhuba ubizwa nangokuthi "ukuphuma" kwiimpawu zengqungquthela, i-padding, kunye nemida.

Inqaku kwiSiphequluli sokungalungi

Iipheqululwazi zewebhu zinezicwangciso ezizenzekelayo kwimimiselo ethile yokubonisa iphepha. Ngokomzekelo, ii-hyperlink ziluhlaza okwesibhakabhaka kwaye zigqitywe ngokungagqibekanga. Oku kuhambelana kuzo zonke iiphequluli, kwaye nangona into ebininzi abayiyoyiyo iguqulela ukuhambelana neemfuno zezinto eziyilwayo zeprojekti ethile, ukuba yonke into eqala ngokungafani okufanayo yenza kube lula ukwenza utshintsho. Ngokudabukisayo, ixabiso elingagqibekanga kwiimigca, i-padding, kunye nemida ayinandipha inqanaba elifanayo le-browser-browser.

Ukulungiswa kweMilinganiselo yeeMigca nePadding

Indlela eyona ndlela yokulungisa isingqinisiso sebhokisi yebhokisi engavumelaniyo ukusetha zonke iimpawu ezisemgangathweni kunye nexabiso lokugqithisa kwezinto ze-HTML ukuya kutsho. Kukho iindlela ezimbalwa onokukwenza oku kukuongeza lo mgaqo weCSS kwi-style style:

* {umgama: 0; ukupakisha: 0; }

Lo mgaqo weCSS usebenzisa i-* okanye i-charactercard character. Loo mpawu uthetha "zonke izinto" kwaye ziza kukhetha zonke izinto ze-HTML kwaye zibeke iigxina kunye ne-padding ukuya ku-0. Nangona lo mgaqo ungacaciswanga, kuba ungaphakathi kwefayile ye-stylesheet yakho, kuya kuba neyona ndawo ephezulu kune-browser xabiso. Ekubeni ezo zilungiso yilokho ubeka phambili, le ndlela enye iya kufeza oko uzimisele ukukwenza.

Enye inketho kukusebenzisa ezi zithethe kwiimpawu ze-HTML kunye nomzimba. Ngenxa yokuba zonke ezinye izinto ezikwiphepha lakho ziza kuba ngabantwana bezinto ezi zimbini, i-CSS cascade ifanele isetyenziswe ezi zithethe kuzo zonke ezinye izinto.

html, umzimba {umgama: 0; ukupakisha: 0; }

Oku kuya kuqalisa uyilo lwakho kwindawo enye kuyo yonke iiphequluli, kodwa into enye ukuyikhumbula kukuba xa uphendulela yonke imida kunye nokugqithisa, kuya kufuneka ubenqumele ukuwabuyisela kwakhona kwiindawo ezithile zephepha lakho lewebhu ukuze uzuze kwaye uzive ukuba uyilo lwakho luyibiza.

Imida

Unokuba ucinga "kodwa akukho ziphequluli ezinomda ojikeleze umzimba womzimba ngokuzenzekelayo". Oku akunjalo ngokuqinisekileyo. Iinguqu ezakudala ze-Internet Explorer zinomda ocacileyo okanye ongabonakaliyo ngeenxa zonke. Ngaphandle kokuba ubeke umda ukuya ku-0, lowo mda ungakonakalisa iindawo zakho zephepha. Ukuba ugqibe ekubeni uza kuqhubeka nokuxhasa ezi nguqulelo ze-IE ezidlulileyo, kufuneka udibanise oku ngoku kongeza oku okulandelayo kumzimba wakho kunye neendlela ze-HTML:

HTML, umzimba {
umgama: 0px;
ukupakisha: 0px;
Umda: 0px;
}

Ngokufana nendlela oye wavala ngayo umgca kunye ne-padding, le ndlela entsha iya kuphelisa imida engagqibekanga. Ungenza into efanayo ngokusebenzisa umkhethi we-wildcard oboniswe ngaphambili kwinqaku.

Inqaku loqobo loJennifer Krynin. Ehlelwe nguJeremy Girard ngo-9/27/16.