Pomocí CSS vynulujte své okraje a hranice

Tento článek vysvětluje, jak používat CSS vynulovat rozpětí a ohraničení, aby se vaše webové stránky vykreslovaly konzistentně v každém prohlížeči.

Normalizace hodnot pro okraje a výplně

Nejlepším způsobem, jak vyřešit problém nekonzistentního modelu pole, je nastavit všechny okraje a hodnoty výplně prvků HTML na nulu. Existuje několik způsobů, jak to udělat, je přidat toto pravidlo CSS do šablony stylů:

I když je toto pravidlo nespecifické, protože je ve vaší externí šabloně stylů, bude mít vyšší specificitu než výchozí hodnoty prohlížeče. Protože tyto výchozí hodnoty přepisujete, tento jeden styl dosáhne toho, co jste si předsevzali.

Jakmile vypnete všechny okraje a výplně, budete je muset pro konkrétní části webové stránky selektivně znovu zapnout, abyste dosáhli vzhledu a dojmu, který váš design vyžaduje.

K normalizaci hranic použijte CSS

Starší verze aplikace Internet Explorer

měl průhledný nebo neviditelný okraj kolem prvků. Pokud nenastavíte ohraničení na 0, může ohraničení narušit vaše rozložení stránky. Pokud jste se rozhodli, že budete i nadále podporovat tyto zastaralé verze IE, budete to muset vyřešit přidáním následujícího do svého těla a stylů HTML:

HTML, tělo {
okraj: 0px;
výplň: 0px;
 ohraničení: 0px;
}

Podobně, jako jste vypnuli okraje a odsazení, tento nový styl také vypne výchozí ohraničení. Totéž byste mohli udělat pomocí selektoru zástupných znaků, který je uveden výše v článku.

Proč ve webovém designu záleží na důsledných okrajích a hranicích

Dnešní webový prohlížeč má za sebou dlouhou cestu od bláznivých dnů, kdy jakýkoli druh konzistence mezi prohlížeči byl zbožným přáním. Dnešní webové prohlížeče plně vyhovují standardům. Hrají pěkně společně a poskytují poměrně konzistentní zobrazení stránky v různých prohlížečích. To zahrnuje nejnovější verze prohlížeče Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari a různých prohlížečů nanesčetné množství mobilních zařízení dnes přístup na webové stránky.

I když bylo jistě dosaženo pokroku v tom, jak prohlížeče zobrazují CSS, mezi těmito různými softwarovými možnostmi stále existují nesrovnalosti. Jednou z běžných nekonzistencí je, jak tyto prohlížeče ve výchozím nastavení počítají okraje, odsazení a ohraničení.

Protože tyto aspekty modelu pole ovlivňují všechny prvky HTML a protože jsou nezbytné při vytváření stránky rozložení, nekonzistentní zobrazení znamená, že stránka může vypadat skvěle v jednom prohlížeči, ale vypadat mírně off další. V boji proti tomuto problému mnoho webových designérů normalizuje tyto aspekty modelu krabice. Tato praxe je také známá jako vynulování hodnoty okrajů, polstrovánía hranice.

Poznámka k výchozím nastavením prohlížeče

Každý webový prohlížeč nastavuje výchozí nastavení pro určité aspekty zobrazení stránky. Například hypertextové odkazy jsou ve výchozím nastavení modré a podtržené. Toto chování je konzistentní napříč různými prohlížeči a ačkoli je to něco, co většina návrhářů mění tak, aby vyhovovalo designu potřeby jejich konkrétního projektu, skutečnost, že všichni začínají se stejnými výchozími hodnotami, usnadňuje jejich realizaci Změny. Je smutné, že výchozí hodnota pro okraje, odsazení a ohraničení nemá stejnou úroveň konzistence mezi prohlížeči.