Якщо ми хочемо додати відступи до Html-документа за допомогою внутрішнього CSS, ми маємо виконати кроки, наведені нижче. Використовуючи ці прості кроки, ми можемо легко додати відступи.

df loc

Крок 1: По-перше, нам потрібно ввести код Html у будь-якому текстовому редакторі або відкрити наявний файл Html у текстовому редакторі, у який ми хочемо додати відступи.

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

крок 2: Тепер ми маємо розмістити курсор у тезі head одразу після тегу title документа Html, а потім визначити тег, як показано в наступному блоці.

 Add the Padding in Html 

крок 3: Тепер ми маємо визначити властивість padding у селекторі id, який вказано безпосередньо перед текстом, до якого ми хочемо додати padding.

Нижче наведено п’ять різних властивостей, з яких ми можемо застосувати відступи з кожного боку:

i. Відступ ліворуч:

Якщо ми хочемо застосувати лише лівий відступ до елемента, ми повинні використовувати тільки padding-left властивість у селекторі ідентифікатора. І тоді нам потрібно встановити лише одне значення для властивості, як показано в наступному прикладі:

 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. 

Вихід коду вище, який використовує властивість padding-left, показаний на наступному знімку екрана:

ii. Відступ справа:

string.format

Якщо ми хочемо застосувати до елемента лише праві відступи, тоді нам потрібно використовувати тільки padding-right властивість у селекторі ідентифікатора. І тоді нам потрібно встановити лише одне значення для властивості, як показано в наступному прикладі:

 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. 

Результат коду вище, який використовує властивість padding-right, показано на наступному знімку екрана:

iii. Верхня оббивка:

Якщо ми хочемо застосувати до елемента лише верхні відступи, тоді нам потрібно використовувати тільки набивка-верх властивість у селекторі ідентифікатора. І тоді нам потрібно встановити лише одне значення для властивості, як показано в наступному прикладі:

 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. 

Вихід коду вище, який використовує властивість padding-top, показаний на наступному знімку екрана:

iv. Підкладка знизу:

Якщо ми хочемо застосувати до елемента лише нижнє доповнення, тоді нам потрібно використовувати тільки підкладка-низ властивість у селекторі ідентифікатора. І тоді нам потрібно встановити лише одне значення для властивості, як показано в наступному прикладі:

 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-bottom, показано на наступному знімку екрана:

v. Доповнення:

math pow java

Якщо ми хочемо застосувати різні відступи до всіх чотирьох сторін (верхньої, нижньої, лівої, правої), тоді нам потрібно вказати чотири значення у властивості padding.

 padding: 10px 50px 75px 200px; 

Якщо ми вкажемо два значення, тоді редактор Html застосовує перше відступ до верхнього та нижнього краю, а друге – ліворуч і праворуч.

команди kali linux

 padding: 100px 50px; 

Якщо ми вказуємо лише значення в атрибуті padding, тоді редактор Html застосує однакові padding до всіх чотирьох сторін.

 padding: 100px; 

Приклади властивості Padding:

приклад 1: У наступному прикладі використовується одне значення у властивості padding, щоб встановити однакові відступи для всіх чотирьох сторін.

 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: У наступному прикладі використовуються чотири значення у властивості padding, щоб встановити різні відступи для всіх чотирьох сторін.

 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 показано на наступному знімку екрана: