Якщо ми хочемо додати відступи до 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 показано на наступному знімку екрана:
