TechCodeview

Ak chceme pridať výplň do dokumentu Html pomocou interného CSS, musíme postupovať podľa krokov, ktoré sú uvedené nižšie. Pomocou týchto jednoduchých krokov môžeme jednoducho pridať výplň.

Krok 1: Najprv musíme zadať Html kód v ľubovoľnom textovom editore alebo otvoriť existujúci Html súbor v textovom editore, do ktorého chceme pridať výplň.

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

Krok 2: Teraz musíme umiestniť kurzor do značky head hneď za značku title dokumentu Html a potom definovať tag, ako je znázornené v nasledujúcom bloku.

abstraktná trieda java

 Add the Padding in Html 

Krok 3: Teraz musíme definovať vlastnosť padding v tom selektore id, ktorý je špecifikovaný tesne pred textom, na ktorý chceme pridať padding.

Nasleduje päť rôznych vlastností, z ktorých môžeme použiť výplň na každej strane:

i. Výplň vľavo:

Ak chceme na prvok použiť iba ľavú výplň, musíme použiť iba polstrovanie-vľavo vlastnosť v selektore ID. A potom musíme vlastnosti nastaviť iba jednu hodnotu, ako je znázornené v nasledujúcom príklade:

 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. 

Výstup vyššie uvedeného kódu, ktorý používa vlastnosť padding-left, je zobrazený na nasledujúcej snímke obrazovky:

ii. Výplň vpravo:

Ak chceme na prvok použiť iba správnu výplň, musíme použiť iba polstrovanie-vpravo vlastnosť v selektore ID. A potom musíme vlastnosti nastaviť iba jednu hodnotu, ako je znázornené v nasledujúcom príklade:

 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. 

Výstup vyššie uvedeného kódu, ktorý používa vlastnosť padding-right, je zobrazený na nasledujúcej snímke obrazovky:

iii. Vrchná výplň:

Ak chceme na prvok použiť iba hornú výplň, musíme použiť iba vypchávka-top vlastnosť v selektore ID. A potom musíme vlastnosti nastaviť iba jednu hodnotu, ako je znázornené v nasledujúcom príklade:

 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. 

Výstup vyššie uvedeného kódu, ktorý používa vlastnosť padding-top, je zobrazený na nasledujúcej snímke obrazovky:

metódy java zoznamu

iv. Spodná výplň:

Ak chceme na prvok použiť iba spodnú výplň, musíme použiť iba vypchávka-dno vlastnosť v selektore ID. A potom musíme vlastnosti nastaviť iba jednu hodnotu, ako je znázornené v nasledujúcom príklade:

 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. 

Výstup vyššie uvedeného kódu, ktorý používa vlastnosť padding-bottom, je zobrazený na nasledujúcej snímke obrazovky:

v. Výplň:

Ak chceme použiť rôzne výplne na všetky štyri strany (hore, dole, vľavo, vpravo), potom musíme zadať štyri hodnoty vo vlastnosti výplne.

 padding: 10px 50px 75px 200px; 

Ak zadáme tieto dve hodnoty, potom editor HTML použije prvú výplň na hornú a spodnú stranu a druhú výplň vľavo a vpravo.

 padding: 100px 50px; 

Ak v atribúte padding zadáme iba hodnotu, potom Html editor aplikuje rovnakú výplň na všetky štyri strany.

vracia pole java

 padding: 100px; 

Príklady vlastností výplne:

Príklad 1: Nasledujúci príklad používa jednu hodnotu vo vlastnosti padding na nastavenie rovnakej výplne na všetky štyri strany.

 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. 

Výstup z príkladu 1 je zobrazený na nasledujúcej snímke obrazovky:

Príklad 2: Nasledujúci príklad používa dve hodnoty v vypchávka vlastnosť na nastavenie rovnakej výplne na opačné strany.

 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. 

Výstup z príkladu 2 je zobrazený na nasledujúcej snímke obrazovky:

Príklad 3: Nasledujúci príklad používa štyri hodnoty vo vlastnosti padding na nastavenie rôznych paddingov na všetky štyri strany.

 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. 

Výstup z príkladu 3 je zobrazený na nasledujúcej snímke obrazovky: