Pokud chceme přidat odsazení do Html dokumentu pomocí Internal CSS , pak musíme postupovat podle kroků, které jsou uvedeny níže. Pomocí těchto jednoduchých kroků můžeme výplň snadno přidat.
Krok 1: Nejprve musíme zadat Html kód v libovolném textovém editoru nebo otevřít existující Html soubor v textovém editoru, do kterého chceme přidat 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: Nyní musíme umístit kurzor do značky head hned za značku title dokumentu Html a poté definovat tag, jak je znázorněno v následujícím bloku.
Add the Padding in Html
Krok 3: Nyní musíme definovat vlastnost padding v tom selektoru id, který je specifikován těsně před textem, na který chceme přidat padding.
Následuje pět různých vlastností, ze kterých můžeme použít výplň na každé straně:
css seznamy
i. Polstrování vlevo:
Pokud chceme na prvek použít pouze levé odsazení, pak musíme použít pouze polstrování-vlevo vlastnost v selektoru id. A pak musíme vlastnosti nastavit pouze jednu hodnotu, jak je znázorněno v následujícím příkladu:
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. Otestujte to hned Výstup výše uvedeného kódu, který používá vlastnost padding-left, je zobrazen na následujícím snímku obrazovky:
ii. Výplň vpravo:
Pokud chceme na prvek aplikovat pouze správné odsazení, pak musíme použít pouze vycpávka-vpravo vlastnost v selektoru id. A pak musíme vlastnosti nastavit pouze jednu hodnotu, jak je znázorněno v následujícím příkladu:
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. Otestujte to hned Výstup výše uvedeného kódu, který používá vlastnost padding-right, je zobrazen na následujícím snímku obrazovky:
iii. Horní polstrování:
Pokud chceme na prvek použít pouze horní výplň, musíme použít pouze polstrování-top vlastnost v selektoru id. A pak musíme vlastnosti nastavit pouze jednu hodnotu, jak je znázorněno v následujícím příkladu:
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. Otestujte to hned Výstup výše uvedeného kódu, který používá vlastnost padding-top, je zobrazen na následujícím snímku obrazovky:
iv. Polstrování dna:
Pokud chceme na prvek použít pouze spodní výplň, musíme použít pouze vycpávka-dno vlastnost v selektoru id. A pak musíme vlastnosti nastavit pouze jednu hodnotu, jak je znázorněno v následujícím příkladu:
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. Otestujte to hned Výstup výše uvedeného kódu, který používá vlastnost padding-bottom, je zobrazen na následujícím snímku obrazovky:
v. Výplň:
Pokud chceme použít různé výplně na všechny čtyři strany (nahoře, dole, vlevo, vpravo), musíme zadat čtyři hodnoty ve vlastnosti padding.
padding: 10px 50px 75px 200px;
Pokud uvedeme dvě hodnoty, pak Html editor použije první výplň nahoře a dole a druhou výplň vlevo a vpravo.
padding: 100px 50px;
Pokud v atributu padding zadáme pouze hodnotu, pak Html editor aplikuje stejnou výplň na všechny čtyři strany.
padding: 100px;
Příklady vlastností výplně:
Příklad 1: Následující příklad používá jednu hodnotu ve vlastnosti padding k nastavení stejného odsazení na všech čtyřech stranách.
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. Otestujte to hned Výstup příkladu 1 je zobrazen na následujícím snímku obrazovky:
Příklad 2: Následující příklad používá dvě hodnoty v vycpávka vlastnost pro nastavení stejné výplně 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. Otestujte to hned Výstup z příkladu 2 je zobrazen na následujícím snímku obrazovky:
Příklad 3: Následující příklad používá čtyři hodnoty ve vlastnosti padding k nastavení různého odsazení na všechny čtyři 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. Otestujte to hned Výstup z příkladu 3 je zobrazen na následujícím snímku obrazovky:
