Pomocou CSS vynulujte svoje okraje a hranice

Tento článok vysvetľuje, ako sa používa CSS na nulu marže a hranice, aby sa vaše webové stránky vykresľovali konzistentne v každom prehľadávači.

Normalizácia hodnôt pre okraje a výplň

Najlepším spôsobom, ako vyriešiť problém nekonzistentného modelu škatule, je nastaviť všetky okraje a hodnoty výplne prvkov HTML na nulu. Existuje niekoľko spôsobov, ako to urobiť, je pridať toto pravidlo CSS do šablóny štýlov:

Aj keď je toto pravidlo nešpecifické, pretože sa nachádza v externej šablóne so štýlmi, bude mať vyššiu špecifickosť ako predvolené hodnoty prehľadávača. Pretože tieto predvolené hodnoty prepíšete, týmto štýlom sa dosiahne to, čo ste si predsavzali.

Po vypnutí všetkých okrajov a výplní ich budete musieť pre konkrétne časti svojej webovej stránky selektívne znova zapnúť, aby ste dosiahli vzhľad, ktorý vyžaduje váš dizajn.

Pomocou CSS normalizujte hranice

Staršie verzie prehliadača Internet Explorer mal priehľadný alebo neviditeľný okraj okolo prvkov. Ak nenastavíte hranicu na 0, môže táto hranica pokaziť rozloženie vašich stránok. Ak ste sa rozhodli, že budete naďalej podporovať tieto zastarané verzie IE, budete to musieť vyriešiť pridaním nasledujúceho textu do svojho tela a štýlov HTML:

HTML, telo {
okraj: 0px;
výplň: 0px;
 orámovanie: 0px;
}

Podobným spôsobom, ako ste vypli okraje a výplne, aj tento nový štýl vypne predvolené okraje. To isté môžete urobiť aj pomocou výberu zástupných znakov zobrazeného vyššie v článku.

Prečo vo webdizajne záleží na dôsledných okrajoch a hraniciach

Dnešný webový prehliadač prešiel dlhou cestou z bláznivých dní, keď bola akákoľvek konzistencia medzi rôznymi prehliadačmi zbožným želaním. Dnešné webové prehliadače plne vyhovujú štandardom. Hrajú sa spolu pekne a poskytujú pomerne konzistentné zobrazenie stránky v rôznych prehliadačoch. Patria sem najnovšie verzie prehľadávačov Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari a rôznych prehľadávačov, ktoré sa nachádzajú na serverinespočetné množstvo mobilných zariadení dnes prístup na webové stránky.

Aj keď sa určite dosiahol pokrok v tom, ako prehliadače zobrazujú CSS, medzi týmito rôznymi softvérovými možnosťami stále existujú nezrovnalosti. Jednou z bežných nezrovnalostí je, ako tieto prehliadače predvolene počítajú okraje, výplne a ohraničenia.

Pretože tieto aspekty modelu škatule ovplyvňujú všetky prvky HTML a pretože sú nevyhnutné pri vytváraní stránky rozloženia, nekonzistentné zobrazenie znamená, že stránka môže vyzerať skvele v jednom prehliadači, ale v prehliadači mierne vyzerať ďalší. V boji proti tomuto problému mnoho webových dizajnérov normalizuje tieto aspekty modelu škatule. Táto prax je známa aj ako vynulovanie hodnoty pre marže, vypchávkaa hranice.

Poznámka k predvoleným nastaveniam prehliadača

Každý webový prehľadávač nastavuje predvolené nastavenie pre určité aspekty zobrazenia stránky. Napríklad hypertextové odkazy sú predvolene modré a podčiarknuté. Toto správanie je konzistentné v rôznych prehľadávačoch a hoci je to niečo, čo väčšina návrhárov mení tak, aby vyhovovalo danému dizajnu potrieb ich konkrétneho projektu, skutočnosť, že všetci začínajú s rovnakými predvolenými hodnotami, uľahčuje ich uskutočňovanie zmeny. Je smutné, že predvolená hodnota pre okraje, odsadenie a ohraničenie nemá rovnakú úroveň konzistencie medzi prehliadačmi.