Използвайте CSS, за да нулирате вашите полета и граници

Тази статия обяснява как да използвате CSS да се нулира маржове и граници, така че вашите уеб страници да се показват последователно във всеки браузър.

Нормализиране на стойности за полета и подложки

Най-добрият начин за решаване на проблема с несъответстващия модел на кутията е да зададете нула на всички полета и стойности за подпълване на HTML елементи. Има няколко начина, по които можете да направите това, е да добавите това CSS правило към вашата таблица със стилове:

Въпреки че това правило е неспецифично, тъй като е във вашия външен лист със стилове, то ще има по-висока специфичност от стойностите на браузъра по подразбиране. Тъй като тези настройки по подразбиране са това, което презаписвате, този стил ще постигне това, което сте си поставили за цел.

След като изключите всички полета и подложки, ще трябва да ги включите избирателно отново за определени части от вашата уеб страница, за да постигнете външния вид и усещането, за които дизайнът ви изисква.

Използвайте CSS за нормализиране на границите

По-стари версии на Internet Explorer имали прозрачна или невидима граница около елементи. Освен ако не зададете границата на 0, тази граница може да обърка оформленията на вашата страница. Ако сте решили, че ще продължите да поддържате тези остарели версии на IE, ще трябва да се справите с това, като добавите следното към вашето тяло и HTML стилове:

HTML, тяло {
марж: 0px;
подплата: 0px;
 граница: 0px;
}

Подобно на това как изключихте полетата и подложките, този нов стил също ще изключи границите по подразбиране. Можете също да направите същото, като използвате селектора за заместващи символи, показан по-рано в статията.

Защо последователните полета и граници имат значение при уеб дизайна

Днешният уеб браузър е изминал дълъг път от лудите дни, когато всякакъв вид последователност на различни браузъри е желателно мислене. Днешните уеб браузъри са напълно съвместими със стандартите. Те играят добре заедно и осигуряват доста последователно показване на страниците в различните браузъри. Това включва най-новите версии на Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari и различните браузъри, намерени набезбройните мобилни устройства достъп до уебсайтове днес.

Въпреки че със сигурност е постигнат напредък в начина, по който браузърите показват CSS, все още има несъответствия между тези различни софтуерни опции. Едно от често срещаните несъответствия е как тези браузъри изчисляват полета, подложки и граници по подразбиране.

Тъй като тези аспекти на модела на кутията засягат всички HTML елементи и защото те са от съществено значение при създаването на страница оформления, непостоянният дисплей означава, че дадена страница може да изглежда страхотно в един браузър, но да изглежда леко отстранена в друг. За да се преборят с този проблем, много уеб дизайнери нормализират тези аспекти на модела кутия. Тази практика е известна още като зануляване стойностите за маржовете, подплата, и граници.

Бележка за настройките по подразбиране на браузъра

Всеки уеб браузър задава настройки по подразбиране за определени аспекти на дисплея на дадена страница. Например хипервръзките са сини и подчертани по подразбиране. Това поведение е последователно в различни браузъри и въпреки че е нещо, което повечето дизайнери променят, за да отговарят на дизайна нуждите на техния специфичен проект, фактът, че всички те започват с едни и същи настройки, улеснява тяхното създаване промени. За съжаление стойността по подразбиране за полета, подложки и граници не се радва на същото ниво на съгласуваност между браузърите.