Ако желимо да додамо паддинг у Хтмл документ користећи интерни ЦСС, онда морамо да следимо кораке који су дати у наставку. Користећи ове једноставне кораке, лако можемо додати допуну.
Корак 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 је приказан на следећем снимку екрана:
