Разумевање основа ЦСС облога

click fraud protection

ЦСС додавање је једно од својстава ЦСС модел кутије. Ово стенографско својство поставља облоге око све четири стране ХТМЛ елемента. ЦСС подлога се може применити на скоро сваку ХТМЛ таг (осим неких ознака табеле). Поред тога, све четири стране елемента могу имати различиту вредност.

Својство додавања ЦСС-а

Да бисте користили скраћено својство додавања ЦСС-а, можете да користите мнемотехнику „ТРоуБЛе“ (или „ТРиБбЛе“ за ваше љубитеље Стар Трек-а). Ово значи врх, јел тако, дно, и лево, а односи се на редослед ширина додавања које сте поставили у својству стенографије. На пример:

попуњавање: горе десно доле лево;
попуњавање: 1пк 2пк 3пк 6пк;

Ако сте користили горе наведене вредности, применио би другачију вредност попуњавања на сваку страну било ког ХТМЛ елемента на који га примените. Ако желите да примените исту подлогу на све четири стране, можете поједноставити своју ЦСС и само напиши једну вредност:

подлога: 12пк;

Са том линијом ЦСС-а, 12 пиксела додатака би се односило на све 4 стране елемента.

instagram viewer

Ако желите да подлога буде иста за горњи и доњи и леви и десни део, можете да напишете две вредности:

попуњавање: 24пк 48пк;

Прва вредност (24 пиксела) односила би се на врх и дно, док би се друга односила на леву и десну страну.

Ако напишете три вредности, то ће хоризонтално попуњавање (лево и десно) учинити једнаким, истовремено мењајући горњи и доњи део:

подлога: горњи десни и леви доњи;
попуњавање: 0пк 1пк 3пк;

Према моделу ЦСС оквира, додавање је најближе самом елементу / садржају. То значи да се додавање дода елементу између ширине или висине садржаја и свих вредности ивица које користите. Ако је додатак подешен на нулу, он има исту ивицу као и садржај.

ЦСС Паддинг вредности

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

#цонтаинер {ширина: 800пк; висина: 200пк; }
#цонтаинер п {видтх: 400пк; висина: 75%; попуњавање: 25% 0; }

Тхе висина пасуса унутар #контејнер елемент ће бити 75% од #контејнерВисина плус 25% ширине за горњу облогу и 25% ширине за доњу облогу. Ово укупно износи 300 + 200 + 200 = 700пк.

Ефекти додавања ЦСС облога

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

Када се дода додавање ЦСС-а инлине елементи, може доћи до преклапања елемената изнад и испод уграђеног елемента ако вертикално додавање премашује висину линије, али неће померити висину линије надоле. Хоризонтално додавање ЦСС-а примењено на уметнуте елементе додаће се на почетак и крај елемента. А подстава може завити линије. Али то се неће применити на све редове вишелинијског елемента, тако да не можете да користите увлачење за увлачење сегмента вишередног линијског садржаја.

Такође, у ЦСС2.1 не можете да креирате блокове контејнера где ширина зависи од елемента са процентима за ширине (или ширине додавања). Ако то учините, резултат је недефинисан. Прегледачи ће и даље приказивати садржај, али можда нећете добити резултате које очекујете. Ако размислите, има смисла, као да ваш елемент контејнера мора знати ширину својих подређених елемената да би дефинисао његову ширину - као нпр. када нема унапред дефинисану ширину, а један или више њих има постављену ширину као проценат елемента контејнера, ово поставља кружни ланац без одговор. Ако користите проценте за ширине било чега у документу, требало би да будете сигурни да су дефинисане и ширине надређених елемената.

instagram story viewer