Kailan Gamitin ang margin vs padding sa CSS

'lalagyan na may klase' margin-div 'at ilapat ang' istilo 'attribute bilang' hangganan:1px solid black ”. Pagkatapos nito, magdagdag ng ilang teksto sa '

'tag:

< div klase = 'margin-div' istilo = 'border:1px solid black' >
< p >Linuxhint ay isa sa mga pinakamahusay na tutorial website.< br >
< / p >
< div >

Output

Ngayon, ilapat ang 'margin' property sa '.margin-div' na klase:

.margin-div {
background- kulay : rgb ( 199 , 238 , 205 ) ;
font- laki : daluyan;
hangganan : 3px rgb ( 114 , 250 , 114 ) ;
margin: 100px 100px 100px 100px;
}

Sa code sa itaas, ang ' .margin-div ' ay ginagamit para ma-access ang div element para ilapat ang mga property na nakalista sa ibaba:

• “ kulay ng background ” Ang ari-arian ay ginagamit para maglagay ng kulay sa background.
• “ laki ng font ” ay ginagamit upang ayusin ang laki ng font.
• “ margin ” naglalaan ng espasyo sa labas ng elemento. Halimbawa, itinakda namin ang 'margin' property bilang ' 100px ”.

Dito, makikita mong matagumpay naming naitakda ang ' margin ” ari-arian sa pangalawa “ div ' elemento:

Paano Gamitin ang 'padding' sa CSS?

Upang magamit ang pag-aari na 'padding', ang mga nabanggit na halimbawa sa itaas ay ginamit. Sa pangalawa ' div 'lalagyan, gamitin ang klase' padding-div ” para ilapat ang padding:

< div klase = 'linux' >
< p > Ang Linuxhint ay isa sa mga pinakamahusay na website ng tutorial < / p >
< / div >
< div klase = 'padding-div' istilo = 'border:1px solid black' >
< p >Linuxhint ay isa sa mga pinakamahusay na tutorial website.< br >
< / p >
< / div >

Output

Upang ilapat ang padding at iba pang mga katangian ng CSS sa “ .padding-div ” class, tingnan ang ibinigay na code:

.padding-div {
background- kulay : rgb ( 199 , 238 , 205 ) ;
font- laki : daluyan;
padding: 50px 50px 50px 50px;
}

Sa nabanggit na code, na-access namin ang pangalawang ' div 'elemento gamit ang klase' .padding-div ”. Itinakda namin ang 'kulay ng background' at 'laki ng font'. Bukod dito, ang ' padding 'Ang property ay ginagamit upang magdagdag ng espasyo sa paligid ng nilalaman ng elemento mula sa bawat panig bilang ' 50px ”.

Output

Ipinaliwanag namin ang mga pagkakaiba at paggamit ng 'padding' at 'margin' sa CSS.

Konklusyon

Ang CSS ' margin ' ay ginagamit upang itakda ang puwang sa paligid ng elemento, habang ang ' padding ” ay ginagamit upang magdagdag ng puwang sa paligid ng nilalaman ng elemento. Para ilapat ang margin o padding property, lumikha muna ng ' div ” container, at tukuyin ang klase. Pagkatapos nito, i-access ang klase ayon sa pangalan ng klase at ilapat ang ' margin 'at' padding ' ari-arian. Ipinaliwanag ng post na ito ang paggamit ng margin vs padding sa CSS.