Kada naudoti paraštę ir užpildymą CSS

Kada Naudoti Paraste Ir Uzpildyma Css



CSS yra dvi ypatybės, naudojamos norint pridėti tarpą / tarpą tarp elementų: ' marža “ ir „ kamšalas “. Jei vartotojai nori pridėti tarpą tarp div elementų ar vaizdų, jie gali naudoti bet kurį iš jų. Tiksliau sakant, CSS „maržos“ ypatybė suteikia vietos už elemento ribų, o „padding“ priskiria vietos vidinei elemento daliai.

Šiame įraše aprašoma:

Kada naudoti „padding“ ir „margin“ CSS?

CSS“ marža “ ir „ kamšalas “ savybės naudojamos sąsajai kurti. Jie taip pat naudojami norint nurodyti papildomą tarpą arba tarpą tarp elementų. Tačiau šios dvi savybės skiriasi viena nuo kitos funkcionalumu.







Čia paaiškinsime kai kuriuos skirtumus tarp abiejų savybių:



marža kamšalas
paraštė suteikia vietos už elemento ribų. paminkštinimas suteikia vietos elemento turinyje.
Elemento paraštę galime nustatyti kaip „ automatinis “, kad automatiškai nustatytumėte paraštę aplink elementą. paminkštinimas negali būti nustatytas kaip automatinis. Vartotojas turi nurodyti reikšmes, kad nustatytų erdvę elemento viduje.
Paraštė nepaveikė elemento stiliaus. Kai elementui pritaikysime fono spalvą, tai turės įtakos elemento stiliui.
Kaip maržas galime nustatyti teigiamas ir neigiamas reikšmes. padding palaiko tik teigiamas reikšmes.

Kaip panaudoti „maržą“ CSS?

Norėdami panaudoti „ marža “ nuosavybę, pirmiausia sukurkite „

“ konteinerį ir priskirkite klasę. Pavyzdžiui, mes priskyrėme klasę pavadinimu „ Linux “. Tada įterpkite teksto į pastraipos žymą '

“:



< div klasė = 'Linux' >
< p > „Linuxhint“ yra viena geriausių mokymo svetainių < / p >
< / div >

Aukščiau nurodyto kodo rezultatas paminėtas žemiau:





Dabar sukurkite kitą

'konteineris, kurio klasė' margin-div “ ir pritaikykite „ stilius ' atributas kaip ' kraštinė: 1px vientisai juoda “. Po to pridėkite teksto į '

“ žyma:



< div klasė = 'margin-div' stilius = 'kraštinė: 1 piks. juoda' >
< p >Linuxhint yra viena geriausių mokymo svetainių.< br >
< / p >
< div >

Išvestis

Dabar taikykite ypatybę „margin“ klasei „.margin-div“:

.margin-div {
fonas- spalva : rgb ( 199 , 238 , 205 ) ;
šriftas- dydis : vidutinis;
siena : 3px rgb ( 114 , 250 , 114 ) ;
paraštė: 100 piks. 100 piks. 100 piks. 100 piks.;
}

Aukščiau pateiktame kode „ .margin-div “ naudojamas norint pasiekti div elementą, kad būtų taikomos toliau nurodytos savybės:

  • fono spalva “ ypatybė naudojama spalvoms pritaikyti fone.
  • šrifto dydis “ naudojamas šrifto dydžiui reguliuoti.
  • marža “ paskirsto erdvę elemento išorėje. Pavyzdžiui, mes nustatėme „maržos“ ypatybę kaip „ 100 piks “.

Čia matote, kad sėkmingai nustatėme marža 'nuosavybė antroje' div “ elementas:

Kaip naudoti „padding“ CSS?

Norint naudoti „padding“ ypatybę, buvo panaudoti aukščiau pateikti pavyzdžiai. Antroje ' div ' konteineris, naudokite klasę ' padding-div “, kad pritaikytumėte kamšalą:

< div klasė = 'Linux' >
< p > Linuxhint yra viena geriausių mokymo svetainių < / p >
< / div >
< div klasė = 'padding-div' stilius = 'kraštinė: 1 piks. juoda' >
< p >Linuxhint yra viena geriausių mokymo svetainių.< br >
< / p >
< / div >

Išvestis

Norėdami pritaikyti užpildymą ir kitas CSS ypatybes „ .padding-div “ klasėje, pažvelkite į pateiktą kodą:

.padding-div {
fonas- spalva : rgb ( 199 , 238 , 205 ) ;
šriftas- dydis : vidutinis;
padding: 50px 50px 50px 50px;
}

Aukščiau minėtame kode mes pasiekėme antrąjį div elementas naudojant klasę .padding-div “. Nustatėme „fono spalvą“ ir „šrifto dydį“. Be to, „ kamšalas ypatybė naudojama norint pridėti vietos aplink elemento turinį iš kiekvienos pusės kaip „ 50 piks “.

Išvestis

Mes paaiškinome CSS „papildinimo“ ir „maržos“ skirtumus ir naudojimą.

Išvada

CSS“ marža “ naudojamas norint nustatyti atstumą aplink elementą, o „ kamšalas “ naudojamas tarpams aplink elemento turinį pridėti. Norėdami pritaikyti paraštės arba užpildymo ypatybę, pirmiausia sukurkite „ div “ konteinerį ir nurodykite klasę. Po to pasiekite klasę pagal klasės pavadinimą ir pritaikykite „ marža “ ir „ kamšalas “ savybes. Šiame įraše paaiškintas paraštės ir užpildymo naudojimas CSS.