Browser web ing dina iki wis suwe banget wiwit dina-dina edan ngendi konsistensi lintas-browser ana pemikiran sing dikarepake. Browser web dina iki kabeh standar banget. Padha muter kanthi apik bebarengan lan ngirimake tampilan kaca sing konsisten ing macem-macem browser. Iki kalebu versi paling anyar saka Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, lan macem-macem browser sing ditemokake ing akeh piranti seluler sing digunakake kanggo ngakses situs web saiki.
Nalika kemajuan wis mesthi digawe nalika nerangake browser web lan carane nampilake CSS, isih ana konsekuensi antarane macem-macem pilihan software. Salah sijine inconsistencies umum yaiku carane sing nggoleki browser kasebut pinggiran, padding, lan watesan kanthi standar.
Amarga aspek-aspek ing model kothak iki nyebabake kabeh elemen HTML, lan amarga iku penting kanggo nggawe tata letak halaman, tampilan ora konsisten tegese kaca bisa katon apik ing siji browser, nanging katon rada beda. Kanggo ngatasi masalah iki, akeh perancang web ngormati aspek-aspek ing model kotak kasebut. Praktik iki uga dikenal minangka "ngetrapake" angka kanggo pinggiran, padding, lan wates.
Wigati ing Default Browser
Browser web kabeh duwe setelan gawan kanggo aspèk tampilan tartamtu saka kaca. Umpamane, hyperlinks biru lan direkrut minangka standar. Iki cocog karo macem-macem browser, lan senadyan samubarang sing paling owah-owahan desainer sing cocog karo kabutuhan desain proyek tartamtu, kasunyatan sing kabeh diwiwiti kanthi standar sing padha ndadekake luwih gampang kanggo nggawe owah-owahan kasebut. Sumelang, nilai default kanggo pinggir, padding, lan wates ora seneng tingkat konsistensi lintas-browser sing padha.
Normalizing Values kanggo Margins lan Padding
Cara sing paling apik kanggo ngatasi masalah model kothak ora konsisten yaiku nyetel kabeh watesan lan nilai padding elemen HTML menyang nol. Ana sawetara cara sing bisa dilakoni iki kanggo nambah aturan CSS iki menyang stylesheet sampeyan:
* {margin: 0; padding: 0; }Aturan CSS iki migunakake karakter * utawa wildcard. Karakter kasebut tegesé "kabeh unsur" lan bakal milih saben unsur HTML lan milih dhasar lan padding dadi 0. Sanajan aturan kasebut banget ora spesifik, amarga ana ing gaya njaba sampeyan, bakal duwe kekhasan sing luwih dhuwur tinimbang browser standar nilai nggawe. Wiwit sing standar iku apa sing ditindhes, gaya siji iki bakal ngrampungake apa sing sampeyan lakoni.
Pilihan liyane kanggo ngapikake nilai-nilai kasebut marang unsur HTML lan awak. Amarga kabeh elemen liyane ing kaca sampeyan bakal dadi anak saka rong unsur kasebut, kaskuser CSS kudu ngapikake nilai kasebut marang kabeh elemen liyane.
html, body {margin: 0; padding: 0; }Iki bakal miwiti desain sampeyan ing panggonan sing padha ing kabeh browser, nanging siji bab sing kudu dielingake yaiku yen sampeyan nguripake kabeh pinggiran lan padding, sampeyan kudu milih sing dipilih kanthi pas kanggo bagean tartamtu saka kaca web kanggo entuk tampilan lan aran sing disain telpon sampeyan.
Borders
Sampeyan bisa uga mikir "nanging ora ana browser duwe wates ing sekitare elemen awak minangka standar". Iki ora bener. Versi lawas Internet Explorer duwe wates transparan utawa ora jelas ing saindhenging unsur. Kajaba sampeyan ngeset watesan menyang 0, bates kasebut bisa ngrusak tata letak halaman. Yen sampeyan wis mutusake yen sampeyan bakal terus ndhukung versi-versi kuno IE iki, sampeyan kudu ngatasi iki kanthi nambahake ing ngisor iki ing gaya awak lan HTML:
HTML, badan {
watesan: 0px;
padding: 0px;
wates: 0px;
}
Kaya ing cara nguripake pinggiran lan padding, gaya anyar iki uga bakal mateni wates default. Sampeyan uga bisa nindakake bab sing padha kanthi nggunakake pemilih kertu tanda wildcard sing dituduhake sadurungé ing artikel kasebut.
Artikel asli dening Jennifer Krynin. Diedit dening Jeremy Girard ing 9/27/16.