Paké CSS jeung nol Out margins anjeun sarta wates

web browser dinten ieu parantos datangna cara lila ti poé gélo mana nanaon nu konsistensi cross-browser éta pamikiran wishful. Dinten ieu panyungsi wéb téh sadayana pisan standar-patuh. Aranjeunna maénkeun nicely babarengan jeung nganteurkeun hiji tampilan halaman cukup konsisten peuntas rupa panyungsi. Ieu ngawengku nu versi panganyarna tina Google Chrome, Microsoft Tepi, Mozilla Firefox, Opera, Safari, sarta rupa-rupa panyungsi kapanggih dina éta myriad tina alat nu bagerak dipake pikeun ngakses ramatloka kiwari.

Bari kamajuan geus pasti geus dilakukeun lamun datang ka web panyungsi na kumaha aranjeunna nembongkeun CSS, aya kénéh inconsistencies antara ieu rupa pilihan software. Salah sahiji inconsistencies umum nyaeta kumaha pamadegan panyungsi ngitung margins, padding, sarta wates sacara standar.

Kusabab aspék ieu tina pangaruh kotak model sakabeh elemen HTML, sarta sabab penting dina nyieun layouts kaca, hiji tampilan inconsistent hartina kaca bisa kasampak hébat dina hiji browser, tapi kasampak rada jauh di sejen. Pikeun merangan masalah ieu, loba web désainer normalize aspék ieu sahiji modél kotak. prakték ieu kawanoh ogé salaku "zeroing kaluar" nilai keur margins, padding, sarta wates.

Hiji Catetan dina ingkar Browser

Web panyungsi sadayana gaduh setélan standar pikeun aspék tampilan tangtu kaca. Contona, hyperlinks anu biru tur underlined sacara standar. Ieu konsisten sakuliah rupa panyungsi, sarta sanajan hal eta paling désainer robah pikeun nyocogkeun ka kabutuhan desain proyék husus maranéhanana, kanyataan yén maranéhanana keur sakabeh dimimitian ku ingkar sarua ngajadikeun eta gampang jieun perobahan ieu. Sedih, nilai standar pikeun margins, padding, sarta wates teu ngarasakeun tingkat sarua konsistensi cross-browser.

Nilai Normalizing pikeun margins na Padding

Cara pangalusna pikeun ngajawab masalah model kotak inconsistent nyaéta pikeun nyetél sagala margins tur nilai padding sahiji elemen HTML jeung nol. Aya sababaraha cara nu bisa ngalakukeun ieu téh pikeun nambahkeun aturan CSS ieu stylesheet anjeun:

* {Margin: 0; padding: 0; }

aturan CSS Ieu ngagunakeun * atanapi karakter bonus. Karakter nu hartina "kabeh elemen" na eta dasarna bakal milih unggal unsur HTML jeung nyetel margins na padding mun 0. Sanajan aturan ieu pisan unspecific, sabab aya dina stylesheet éksternal anjeun, éta bakal boga spésifisitas leuwih luhur ti browser standar nilai do. Kusabab jalma ingkar anu kumaha anjeun overwriting, gaya ieu bakal ngalengkepan naon anjeun netepkeun kaluar pikeun ngalakukeun.

pilihan sejen nyaeta nerapkeun nilai ieu ka HTML jeung awak elemen. Kusabab sakabeh elemen séjén dina kaca anjeun bakal barudak dua elemen ieu, anu CSS cascade ngusulkeun panawaran nilai ieu ka sakabeh jalma elemen séjén.

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

Ieu bakal ngamimitian design anjeun di tempat anu sarua dina sagala panyungsi, tapi hiji hal pikeun nginget éta téh sakali Anjeun munggahan sadayana margins na padding dipareuman, Anjeun bakal kedah selektif giliran aranjeunna deui pikeun bagian husus kaca web Anjeun pikeun ngahontal katingal dina jeung ngarasa yén desain Anjeun nyaéta panggero pikeun.

wates

Anjeun bisa jadi pamikiran "tapi euweuh panyungsi boga wates sabudeureun unsur awakna sacara standar". Ieu bisa nedunan leres. versi heubeul tina Internet Explorer boga wates transparan atawa siluman sabudeureun elemen. Iwal mun nangtukeun wates ka 0, nu wates can mess up layouts halaman Anjeun. Lamun geus mutuskeun yén anjeun bakal neruskeun ngarojong ieu versi baheula tina IE, anjeun bakal kedah alamat ieu ku nambahkeun di handap pikeun awak jeung HTML gaya anjeun:

HTML, awak {
margin: 0px;
padding: 0px;
wates: 0px;
}

Sarupa kumaha anjeun dipareuman nu margins na padding, gaya anyar ieu ogé bakal mareuman wates standar. Anjeun oge bisa ngalakukeun hal anu sarua ku cara ngagunakeun pamilihan bonus ditémbongkeun saméméhna dina artikel.

Aslina artikel ku Jennifer Krynin. Diédit ku Jeremy Girard on 9/27/16.