TechCodeview

Če želimo dodati oblazinjenje v dokumentu Html z uporabo notranjega CSS, potem moramo slediti korakom, ki so navedeni spodaj. S temi preprostimi koraki lahko preprosto dodamo oblazinjenje.

Korak 1: Najprej moramo v kateri koli urejevalnik besedil vnesti kodo Html ali v urejevalniku besedil odpreti obstoječo datoteko Html, v katero želimo dodati oblazinjenje.

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

2. korak: Zdaj moramo postaviti kazalec v oznako head takoj za naslovno oznako dokumenta Html in nato definirati oznako, kot je prikazano v naslednjem bloku.

 Add the Padding in Html 

3. korak: Zdaj moramo definirati lastnost oblazinjenja v izbirniku id-ja, ki je določen tik pred besedilom, ki mu želimo dodati oblazinjenje.

vrste testiranja programske opreme

Sledi pet različnih lastnosti, iz katerih lahko uporabimo oblazinjenje na vsaki strani:

jaz. Oblazinjenje levo:

Če želimo za element uporabiti samo levo oblazinjenje, moramo uporabiti samo oblazinjenje-levo lastnost v izbirniku id. In potem moramo lastnosti nastaviti samo eno vrednost, kot je prikazano v naslednjem primeru:

 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. 

Izhod zgornje kode, ki uporablja lastnost padding-left, je prikazan na naslednjem posnetku zaslona:

ii. Oblazinjenje desno:

Če želimo za element uporabiti samo desno oblazinjenje, moramo uporabiti samo oblazinjenje-desno lastnost v izbirniku id. In potem moramo lastnosti nastaviti samo eno vrednost, kot je prikazano v naslednjem primeru:

 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. 

Izhod zgornje kode, ki uporablja lastnost padding-right, je prikazan na naslednjem posnetku zaslona:

iii. Oblazinjenje na vrhu:

Če želimo za element uporabiti samo zgornje oblazinjenje, moramo uporabiti samo oblazinjenje-top lastnost v izbirniku id. In potem moramo lastnosti nastaviti samo eno vrednost, kot je prikazano v naslednjem primeru:

 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. 

Izhod zgornje kode, ki uporablja lastnost padding-top, je prikazan na naslednjem posnetku zaslona:

iv. Oblazinjenje na dnu:

Če želimo za element uporabiti le spodnje oblazinjenje, moramo uporabiti samo oblazinjenje-dno lastnost v izbirniku id. In potem moramo lastnosti nastaviti samo eno vrednost, kot je prikazano v naslednjem primeru:

 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. 

Izhod zgornje kode, ki uporablja lastnost padding-bottom, je prikazan na naslednjem posnetku zaslona:

v. Oblazinjenje:

Če želimo uporabiti različno oblazinjenje za vse štiri strani (zgoraj, spodaj, levo, desno), moramo določiti štiri vrednosti v lastnosti oblazinjenja.

alfa-beta obrezovanje

 padding: 10px 50px 75px 200px; 

Če podamo obe vrednosti, urejevalnik Html uporabi prvo oblazinjenje na vrhu in dnu ter drugo oblazinjenje na levi in ​​desni.

 padding: 100px 50px; 

Če podamo samo vrednost v atributu oblazinjenja, potem urejevalnik Html uporabi enako oblazinjenje za vse štiri strani.

 padding: 100px; 

Primeri lastnosti oblazinjenja:

Primer 1: Naslednji primer uporablja eno vrednost v lastnosti oblazinjenja za nastavitev istega oblazinjenja na vse štiri strani.

 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. 

Rezultat 1. primera je prikazan na naslednjem posnetku zaslona:

Primer 2: Naslednji primer uporablja dve vrednosti v oblazinjenje lastnost za nastavitev enakega oblazinjenja na nasprotnih straneh.

 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. 

Rezultat 2. primera je prikazan na naslednjem posnetku zaslona:

Primer 3: Naslednji primer uporablja štiri vrednosti v lastnosti oblazinjenja za nastavitev različnih oblazinjenj za vse štiri strani.

 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. 

Rezultat 3. primera je prikazan na naslednjem posnetku zaslona: