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

Корак 1: Прво, морамо да откуцамо Хтмл код у било ком уређивачу текста или да отворимо постојећу Хтмл датотеку у уређивачу текста у који желимо да додамо допуну.

 Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding. 

Корак 2: Сада морамо да поставимо курсор у ознаку хеад одмах после ознаке наслова ХТМЛ документа, а затим дефинишемо ознаку као што је приказано у следећем блоку.

финална кључна реч у Јави

 Add the Padding in Html 

Корак 3: Сада морамо да дефинишемо својство допуне у том селектору ид-а који је наведен непосредно испред текста на који желимо да додамо допуну.

Следи пет различитих својстава из којих можемо применити паддинг на свакој страни:

и. Паддинг-лево:

Ако желимо да применимо само леви паддинг на елемент, онда морамо да користимо само паддинг-лево својство у селектору ид. И онда морамо да подесимо само једну вредност својству као што је приказано у следећем примеру:

 Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. 

Излаз горњег кода који користи својство паддинг-лефт приказан је на следећем снимку екрана:

ии. Паддинг-десно:

Ако желимо да применимо само десни паддинг на елемент, онда морамо да користимо само паддинг-десно својство у селектору ид. И онда морамо да подесимо само једну вредност својству као што је приказано у следећем примеру:

 Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. 

Излаз горњег кода који користи својство паддинг-ригхт приказан је на следећем снимку екрана:

иии. Паддинг Топ:

Ако желимо да применимо само горњи паддинг на елемент, онда морамо да користимо само паддинг-топ својство у селектору ид. И онда морамо да подесимо само једну вредност својству као што је приказано у следећем примеру:

 Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. 

Излаз горњег кода који користи својство паддинг-топ приказан је на следећем снимку екрана:

ив. Паддинг Боттом:

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

 Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. 

Излаз горњег кода који користи својство паддинг-боттом приказан је на следећем снимку екрана:

в. Паддинг:

приоритетни ред јава

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

 padding: 10px 50px 75px 200px; 

Ако наведемо две вредности, онда Хтмл едитор примењује први паддинг на врх и дно и други паддинг лево и десно.

 padding: 100px 50px; 

Ако у атрибуту паддинг наведемо само вредност, онда ХТМЛ уређивач примењује исти паддинг на све четири стране.

 padding: 100px; 

Примери својства Паддинг:

Пример 1: Следећи пример користи једну вредност у својству паддинга да би подесио исти паддинг на све четири стране.

 Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. 

Излаз примера 1 је приказан на следећем снимку екрана:

Пример 2: Следећи пример користи две вредности у паддинг својство да се исти паддинг постави на супротне стране.

 Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. 

Излаз примера 2 је приказан на следећем снимку екрана:

Пример 3: Следећи пример користи четири вредности у својству паддинга за постављање различитих допуна на све четири стране.

 Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. 

Излаз примера 3 је приказан на следећем снимку екрана: