Használja a CSS-t a margók és határok nullázásához

Ez a cikk elmagyarázza, hogyan kell használni CSS nullázni margók és szegélyez, hogy a weblapok következetesen jelenjenek meg minden böngészőben.

Az értékek normalizálása a margókhoz és a betétekhez

A következetlen dobozmodell problémájának legjobb megoldása az, ha a HTML elemek összes margóját és kitöltési értékét nullára állítja. Ezt néhány módon megteheti, ha hozzáadja ezt a CSS-szabályt a stíluslapjához:

Annak ellenére, hogy ez a szabály nem specifikus, mivel a külső stíluslapban található, magasabb lesz a specifikussága, mint az alapértelmezett böngészőértékeknél. Mivel ezeket az alapértelmezett beállításokat írod felül, ez az egy stílus teljesíti azt, amit te elhatároztál.

Miután kikapcsolta az összes margót és kitöltést, szelektíven vissza kell kapcsolnia őket a weboldal bizonyos részeihez, hogy elérje a megjelenését és érzetét.

A határok normalizálásához használja a CSS-t

Idősebb az Internet Explorer verziói átlátszó vagy láthatatlan szegéllyel rendelkezett az elemek körül. Hacsak nem állítja a szegélyt 0-ra, ez a szegély megzavarhatja az oldal elrendezését. Ha úgy döntött, hogy továbbra is támogatja az IE ezen elavult verzióit, akkor ezt meg kell oldania a következők hozzáadásával a test és a HTML stílusokhoz:

HTML, body {
margó: 0px;
párnázás: 0px;
 határ: 0px;
}

A margók és a párnázás kikapcsolásához hasonlóan ez az új stílus kikapcsolja az alapértelmezett szegélyeket is. Ugyanezt megteheti a cikkben korábban bemutatott helyettesítő jelölővel is.

Miért következetes margók és határok számítanak a web tervezésben

A mai webböngésző hosszú utat tett meg azoktól az őrült napoktól, amikor a böngészők közötti bármiféle konzisztencia vágyálom volt. A mai webböngészők teljes mértékben megfelelnek a szabványoknak. Szépen játszanak együtt, és meglehetősen következetes oldalmegjelenítést nyújtanak a különböző böngészőkben. Ez magában foglalja a Google Chrome, a Microsoft Edge, a Mozilla Firefox, az Opera, a Safari és a különböző böngészők legújabb verzióita számtalan mobil eszköz ma a weboldalak elérése.

Noha a böngészők bizonyosan előreléptek a CSS megjelenítésében, még mindig vannak ellentmondások e különféle szoftveropciók között. Az egyik általános következetlenség az, hogy ezek a böngészők alapértelmezés szerint hogyan számolják a margókat, a kitöltést és a szegélyeket.

Mivel a dobozmodell ezen aspektusai az összes HTML elemre kihatnak, és mivel elengedhetetlenek az oldal létrehozásakor elrendezések, a következetlen megjelenítés azt jelenti, hogy egy oldal nagyszerűen nézhet ki egy böngészőben, de kissé kikapcsol egy másik. A probléma leküzdése érdekében sok webdesigner normalizálja a doboz modell ezen aspektusait. Ez a gyakorlat más néven nullázás a margók értékei, párnázás, és a határok.

Megjegyzés a böngésző alapértelmezéseiről

A böngészők mindegyike alapértelmezett beállításokat ad meg az oldal bizonyos megjelenítési szempontjaihoz. Például a hiperhivatkozások alapértelmezés szerint kékek és aláhúzottak. Ez a viselkedés következetes a különböző böngészőkben, és bár ez az, amit a legtöbb tervező megváltoztat, hogy megfeleljen a dizájnnak Az a tény, hogy valamennyien ugyanazokkal az alapértelmezettel indulnak, megkönnyíti ezek megvalósítását változtatások. Sajnos, a margók, a kitöltések és a szegélyek alapértelmezett értéke nem ugyanazon a böngészőn keresztüli konzisztencián alapul.