Користите ЦСС да бисте поништили маргине и границе

Шта знати

  • Додајте правило у ЦСС табелу стилова које поставља све маргине и вредности за додавање ХТМЛ елемената на нулу.

Овај чланак објашњава како се користи ЦСС на нулу марже и границе тако да се ваше веб странице доследно приказују у сваком прегледачу.

Нормализирање вредности за маргине и облоге

Најбољи начин за решавање проблема недоследног модела оквира је постављање свих маргина и вредности за додавање ХТМЛ елемената на нулу. Постоји неколико начина на које бисте то могли да урадите је да додате ово ЦСС правило у своју табелу стилова:


Иако је ово правило неспецифично, јер се налази у вашем спољном листу стилова, оно ће имати већу специфичност од задатих вредности прегледача. Будући да су те подразумеване вредности оно што преписујете, овај стил постићи ће оно што намеравате.

Једном када искључите све маргине и додавање, мораћете да их селективно поново укључите за одређене делове веб странице како бисте постигли изглед и осећај који ваш дизајн захтева.

Користите ЦСС за нормализацију граница

instagram viewer

Старије верзије Интернет Екплорера имао провидну или невидљиву границу око елемената. Ако границу не поставите на 0, она може покварити распоред страница. Ако сте одлучили да ћете и даље подржавати ове застареле верзије ИЕ, мораћете да се позабавите тиме додавањем следећег у своје тело и ХТМЛ стилове:

ХТМЛ, тело {
маржа: 0пк;
попуњавање: 0пк;
граница: 0пк;
}

Слично ономе како сте искључили маргине и додавање, овај нови стил ће искључити и задате границе. Исто то бисте могли да урадите и помоћу бирача џокер знакова приказаног раније у чланку.

Зашто су доследне маргине и границе важне у веб дизајну

Данашњи веб прегледач далеко је превалио луде дане када је било која врста доследности више прегледача била жеља. Данашњи веб прегледачи су у потпуности усклађени са стандардима. Лепо се играју заједно и пружају прилично доследан приказ страница у различитим прегледачима. То укључује најновије верзије Гоогле Цхроме, Мицрософт Едге, Мозилла Фирефок, Опера, Сафари и разне прегледаче који се налазе набезброј мобилних уређаја приступ веб локацијама данас.

Иако је сигурно постигнут напредак у начину на који прегледачи приказују ЦСС, и даље постоје недоследности између ових различитих софтверских опција. Једна од уобичајених недоследности је како ти прегледачи подразумевано израчунавају маргине, допуне и границе.

Зато што ови аспекти модела оквира утичу на све ХТМЛ елементе и зато што су они кључни у креирању странице распореда, недоследан приказ значи да страница може изгледати сјајно у једном прегледачу, али да изгледа незнатно у њој други. Да би се решили овог проблема, многи веб дизајнери нормализују ове аспекте модела кутија. Ова пракса је такође позната као нулирање вредности маржи, паддинг, и границе.

Напомена о подразумеваним поставкама прегледача

Сваки веб прегледач поставља подразумеване поставке за одређене аспекте приказа странице. На пример, хипервезе су подразумевано плаве и подвучене. Овакво понашање је доследно у различитим прегледачима, и иако је то нешто што већина дизајнера мења у складу са дизајном потребе њиховог специфичног пројекта, чињеница да сви почињу са истим подразумеваним поставкама олакшава њихово стварање Промене. Нажалост, подразумеване вредности маргина, попуњавања и ивица не уживају исти ниво доследности више прегледача.

instagram story viewer