Ce să știi
- Adăugați o regulă în foaia de stil CSS care setează la zero toate marjele și valorile de umplere ale elementelor HTML.
Acest articol explică modul de utilizare CSS la zero margini și margini, astfel încât paginile dvs. web să fie redate în mod constant în fiecare browser.
Normalizarea valorilor pentru margini și căptușeală
Cel mai bun mod de a rezolva problema unui model de casetă inconsecvent este setarea la zero a tuturor marjelor și a valorilor de umplere a elementelor HTML. Există câteva modalități prin care puteți face acest lucru este să adăugați această regulă CSS la foaia de stil:
Chiar dacă această regulă nu este specifică, deoarece se află în foaia dvs. de stil externă, va avea o specificitate mai mare decât valorile implicite ale browserului. Întrucât aceste valori implicite sunt ceea ce suprascrieți, acest stil va realiza ceea ce vă propuneți să faceți.
Odată ce ați dezactivat toate marginile și căptușeala, va trebui să le reporniți în mod selectiv pentru anumite părți ale paginii dvs. web pentru a obține aspectul pe care designul dvs. îl cere.
Utilizați CSS pentru a normaliza chenarele
Mai in varsta versiuni de Internet Explorer avea o margine transparentă sau invizibilă în jurul elementelor. Cu excepția cazului în care setați marginea la 0, bordura respectivă vă poate afecta paginile. Dacă ați decis că veți continua să susțineți aceste versiuni vechi ale IE, va trebui să abordați acest lucru adăugând următoarele în corpul dvs. și stilurile HTML:
HTML, corp {
marja: 0px;
umplutură: 0 px;
chenar: 0px;
}
Similar cu modul în care ați dezactivat marginile și căptușeala, acest nou stil va dezactiva și marginile implicite. De asemenea, ați putea face același lucru folosind selectorul comodin afișat mai devreme în articol.
De ce contează marginile și frontierele coerente în proiectarea web
Browserul web de astăzi a parcurs un drum lung din zilele nebune în care orice fel de consistență a browserului încrucișat era o dorință plăcută. Browserele web de astăzi sunt pe deplin conforme cu standardele. Se joacă frumos împreună și oferă o afișare a paginii destul de consistentă pe diferite browsere. Aceasta include cele mai recente versiuni de Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari și diversele browsere găsite penenumăratele dispozitive mobile accesarea site-urilor web astăzi.
Deși s-au făcut cu siguranță progrese în ceea ce privește modul în care browserele afișează CSS, există încă neconcordanțe între aceste opțiuni software. Una dintre inconsecvențele comune este modul în care aceste browsere calculează în mod implicit marjele, umplerea și marginile.
Deoarece aceste aspecte ale modelului de cutie afectează toate elementele HTML și pentru că sunt esențiale în crearea paginii aspectele, un afișaj inconsecvent înseamnă că o pagină poate arăta excelent într-un browser, dar arăta ușor în un alt. Pentru a combate această problemă, mulți designeri web normalizează aceste aspecte ale modelului cutiei. Această practică este, de asemenea, cunoscută sub numele de reducerea la zero valorile pentru margini, căptușeală, și granițe.
O notă despre valorile implicite ale browserului
Fiecare browser web setează setările implicite pentru anumite aspecte de afișare ale unei pagini. De exemplu, hyperlinkurile sunt albastre și subliniate în mod implicit. Acest comportament este consecvent în diferite browsere și, deși este un lucru pe care majoritatea designerilor îl modifică pentru a se potrivi designului nevoile proiectului lor specific, faptul că toți încep cu aceleași valori implicite face mai ușor realizarea acestora schimbări. Din păcate, valoarea implicită pentru margini, umplutură și margini nu se bucură de același nivel de consistență între browser.