paddingИмовина у ЦСС дефинише најскривеније део кутије модела, стварајући простор око садржаја неког елемента, унутар било дефинисаних маржи и / или граница.
Вредности додавања подешавају се дужинама или процентима и не могу да прихвате негативне вредности. Почетна, односно подразумевана вредност за сва својства облога је 0.
Ево једноставног примера:
.box ( padding: 0 1.5em 0 1.5em; )Горњи пример користи paddingсвојство стенографије, које прихвата до четири вредности, приказане овде:
.box ( padding: || || || )Ако је постављено мање од четири вредности, вредности које недостају претпостављају се на основу дефинисаних. На пример, следећа два скупа правила добила би идентичне резултате:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Дакле, ако је дефинисана само једна вредност, ово поставља сва четири својства додавања на исту вредност:
.box ( padding: 20px; )Ако су декларисане три вредности, јесте padding: (top) (left-and-right) (bottom);.
Било које од појединачних својстава попуњавања може се декларисати помоћу лонгханда, у том случају бисте дефинисали само једну вредност по својству. Дакле, претходни пример би могао бити преписан на следећи начин:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Израчунавање облога и ширине елемента
Ако елемент има наведену ширину, било које додавање том елементу додаће се укупној ширини елемента. Ово је често непожељан резултат, јер захтева поновну израчун ширине елемента сваки пут када се подметање подеси. (Имајте на уму да се то дешава и са висином, али у већини случајева пожељно је не дати елементу задату висину.)
На пример:
.box ( padding: 20px; width: 400px; )У овом примеру, иако је .boxелементу дата експлицитна ширина од 400 пиксела, стварна приказана ширина елемента на страници биће 440 пиксела. Ово узима у обзир не само ширину од 400 пиксела, већ и 20 пиксела левог и 20 пиксела десног попуњавања (дефинисано скраћеницом за паддинг у претходном примеру).
То се дешава ради одржавања 400 пиксела простора садржаја, уместо 400 пиксела укупне ширине елемента. Ево оловке која ово показује:
То се догађа у свим прегледачима у употреби, у стандардном режиму, али се неће догодити у ИЕ6 и ИЕ7 у куиркс режиму (то јест, на страницама приказаним у ИЕ6 или ИЕ7 на којима нема декларисаног докторског типа или где се нешто друго дешава да би покренуло куиркс режим).
Да бисте решили овај проблем, задржавајући тако ширину од 400 пиксела без обзира на количину подлога, можете користити box-sizingсвојство:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )То доводи до тога да елемент одржава своју ширину, истовремено повећавајући облоге, чиме се смањује расположиви простор садржаја. Ево демонстрације:
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Да | Да | Да | Да | Да | Да | Да |