Margin vs Padding
Ang pagkakaiba sa pagitan ng margin at padding ay isang mahalagang aspeto sa CSS dahil ang margin at padding ay dalawang mahalagang konsepto na ginagamit sa CSS upang magbigay ng espasyo sa pagitan ng iba't ibang item. Ang padding at margin ay hindi mapapalitan at may iba't ibang layunin kaya dapat gamitin nang naaangkop. Ang padding ay ang puwang sa pagitan ng nilalaman at hangganan ng isang bloke. Ang margin, sa kabilang banda, ay ang espasyo sa labas ng hangganan ng isang bloke. Ang margin ay naghihiwalay ng mga bloke mula sa mga katabing bloke habang ang padding ay naghihiwalay sa hangganan mula sa nilalaman.
Ano ang Padding?
Sa CSS (Cascading Style Sheets), ang padding ay ang espasyong iniingatan sa pagitan ng content at ng border. Pinaghihiwalay nito ang nilalaman ng isang bloke mula sa gilid nito. Ang padding ay transparent at kasama ang background na larawan o kulay ng background ng elemento, pati na rin. Ang halaga ng padding ng isang elemento ay tinukoy sa pamamagitan ng paggamit ng terminong "padding" sa CSS code. Halimbawa, para magdagdag ng 25px na padding sa paligid ng content na sumusunod na code ay maaaring gamitin.
div {
lapad: 300px;
taas: 300px;
padding: 25px;
border: 25px solid;
}
Kung kinakailangan, maaaring hiwalay na tukuyin ang iba't ibang halaga ng padding para sa kaliwa, kanan, itaas, at ibaba rin. Ang sumusunod na piraso ng code ay tumutukoy sa iba't ibang mga halaga ng padding para sa bawat panig.
div {
lapad: 300px;
taas: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
border: 25px solid;
}
Ano ang Margin?
Sa CSS (Cascading Style Sheets), ang margin ay ang espasyo sa labas ng hangganan. Pinaghihiwalay nito ang isang bloke mula sa iba pang mga bloke. Ang margin ay transparent din, ngunit ang isang malaking pagkakaiba sa padding ay ang margin ay hindi kasama ang mga larawan sa background o mga kulay ng background na inilapat sa elemento. Ang halaga ng margin sa CSS ay tinukoy gamit ang terminong "margin". Ang sumusunod na piraso ng code ay naglapat ng 25px na margin sa paligid ng div block.
div {
lapad: 320px;
taas: 320px;
border: 5px solid;
margin: 25px;
}
Maaaring tukuyin ang iba't ibang value para sa iba't ibang panig ng block, pati na rin. Ang sumusunod na piraso ng code ay naglalapat ng iba't ibang mga halaga ng margin para sa bawat panig.
div {
lapad: 320px;
taas: 320px;
border: 5px solid;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}
Ano ang pagkakaiba ng Margin at Padding?
• Ang padding ay ang espasyo sa pagitan ng hangganan at ng nilalaman habang ang margin ay ang espasyo sa labas ng hangganan.
• Pinaghihiwalay ng padding ang content ng block mula sa border. Pinaghihiwalay ng margin ang isang bloke mula sa isa pa.
• Binubuo ang padding ng mga larawan sa background at mga kulay ng background na inilapat sa nilalaman habang ang margin ay hindi ganoong nilalaman.
• Maaaring mag-overlap ang mga margin ng katabing bloke habang hindi nagsasapawan ang padding.
Buod:
Padding vs Margin
Ang Padding ay ang espasyo sa loob ng hangganan ng isang bloke na naghihiwalay sa hangganan mula sa nilalaman. Ang margin ay ang puwang sa labas ng hangganan na naghihiwalay sa isang bloke mula sa mga katabing bloke. Ang isa pang pagkakaiba ay kasama sa padding ang larawan sa background at mga kulay ng background na inilapat sa paligid ng nilalaman habang ang margin ay hindi naglalaman ng mga ito. Ang mga margin ng mga katabing bloke ay maaaring minsan ay magkakapatong kapag ang browser ay nag-render ng pahina ngunit para sa padding ay hindi mangyayari ang ganoong bagay.
