Millal kasutada CSS-is veerist vs polsterdust

Millal Kasutada Css Is Veerist Vs Polsterdust



CSS-is on elementidevahelise tühiku lisamiseks kaks atribuuti: ' marginaal ” ja „ polsterdus ”. Kui kasutajad soovivad div-elementide või piltide vahele ruumi lisada, saavad nad kasutada mõnda neist. Täpsemalt annab CSS-i atribuut „marginaali” ruumi väljaspool elementi, samas kui „polster” eraldab ruumi elemendi sisemisele osale.

See postitus kirjeldab:

Millal kasutada CSS-is polsterdust vs marginaali?

CSS ' marginaal ” ja „ polsterdus ” atribuute kasutatakse liidese kujundamisel. Neid kasutatakse ka täiendava tühimiku või tühiku määramiseks elementide vahel. Need kaks omadust erinevad aga funktsionaalsuse poolest.







Siin selgitame mõningaid erinevusi mõlema atribuudi vahel:



marginaal polsterdus
veeris annab ruumi väljaspool elementi. polsterdus annab ruumi elemendi sisu sees.
Saame määrata elemendi veerise kui ' auto ” elemendi ümber oleva veerise automaatseks määramiseks. polsterdust ei saa automaatseks seada. Kasutaja peab määrama väärtused, et määrata elemendi sees tühik.
Veeris ei ole elemendi stiili mõjutanud. Kui rakendame elemendile taustavärvi, mõjutab see elemendi stiili.
Marginaalideks saame määrata nii positiivseid kui ka negatiivseid väärtusi. polsterdus toetab ainult positiivseid väärtusi.

Kuidas kasutada CSS-is marginaali?

Et kasutada ' marginaal ' atribuut, esmalt looge '

” konteiner ja määrake klass. Näiteks oleme määranud klassi nimega ' Linux ”. Seejärel manustage teksti lõigumärgendisse '

”:



< div klass = 'linux' >
< lk > Linuxhint on üks parimaid õpetuste veebisaite < / lk >
< / div >

Ülaltoodud koodi tulemust mainitakse allpool:





Nüüd looge teine ​​'

'konteiner, mille klass on' margin-div ” ja rakenda „ stiilis ' atribuut kui ' ääris: 1 pikslit täismust ”. Pärast seda lisage jaotisesse '

” silt:



< div klass = 'margin-div' stiilis = 'ääris: 1 pikslit täismust' >
< lk >Linuxhint on üks parimaid õppeveebisaite.< br >
< / lk >
< div >

Väljund

Nüüd rakendage 'margin-div' klassile atribuut 'margin'.

.margin-div {
taust- värvi : rgb ( 199 , 238 , 205 ) ;
font- suurus : keskmine;
piir : 3px rgb ( 114 , 250 , 114 ) ;
veeris: 100px 100px 100px 100px;
}

Ülaltoodud koodis on ' .margin-div ” kasutatakse div-elemendile juurdepääsuks, et rakendada alltoodud atribuute:

  • taustavärv ” atribuuti kasutatakse taustale värvi rakendamiseks.
  • fondi suurus ” kasutatakse fondi suuruse reguleerimiseks.
  • marginaal ” eraldab ruumi väljaspool elementi. Näiteks oleme määranud 'marginaali' atribuudiks ' 100 pikslit ”.

Siin näete, et oleme edukalt seadistanud marginaal ' kinnisvara teisel' div ” element:

Kuidas kasutada CSS-is polsterdust?

Atribuudi 'polster' kasutamiseks on kasutatud ülaltoodud näiteid. Teises ' div ' konteiner, kasutage klassi ' polsterdus-div polsterduse rakendamiseks:

< div klass = 'linux' >
< lk > Linuxhint on üks parimaid õppeveebisaite < / lk >
< / div >
< div klass = 'padding-div' stiilis = 'ääris: 1 pikslit täismust' >
< lk >Linuxhint on üks parimaid õppeveebisaite.< br >
< / lk >
< / div >

Väljund

Täidise ja muude CSS-i atribuutide rakendamiseks .padding-div ” klassis, vaadake pakutavat koodi:

.padding-div {
taust- värvi : rgb ( 199 , 238 , 205 ) ;
font- suurus : keskmine;
polsterdus: 50px 50px 50px 50px;
}

Eespool nimetatud koodis pääsesime juurde teisele ' div ' element kasutades klassi ' .padding-div ”. Oleme määranud 'taustavärvi' ja 'fondi suuruse'. Veelgi enam, ' polsterdus ' atribuuti kasutatakse elemendi sisu ümber ruumi lisamiseks mõlemalt poolt kui ' 50 pikslit ”.

Väljund

Oleme selgitanud CSS-i 'polsterduse' ja 'marginaali' erinevusi ja kasutusi.

Järeldus

CSS' marginaal ' kasutatakse elemendi ümber vahekauguse määramiseks, samas kui ' polsterdus ” kasutatakse elemendi sisu ümber tühikute lisamiseks. Veerise või polsterduse atribuudi rakendamiseks looge esmalt „ div ” konteiner ja määrake klass. Pärast seda avage klassile klassi nime järgi ja rakendage ' marginaal ” ja „ polsterdus ” omadused. See postitus on selgitanud veerise ja polsterduse kasutamist CSS-is.