Maža pret polsterējumu
Atšķirība starp piemali un polsterējumu ir svarīgs CSS aspekts, jo piemale un polsterējums ir divi svarīgi jēdzieni, ko CSS izmanto, lai nodrošinātu atstarpi starp dažādiem vienumiem. Polsterējums un piemales nav savstarpēji aizvietojami, un tiem ir dažādi mērķi, tāpēc tie jāizmanto atbilstoši. Polsterējums ir atstarpe starp saturu un bloka apmali. No otras puses, mala ir telpa ārpus bloka robežas. Piemale atdala blokus no blakus esošajiem blokiem, savukārt polsterējums atdala apmali no satura.
Kas ir polsterējums?
CSS (kaskādes stila lapās) polsterējums ir atstarpe starp saturu un apmali. Tas atdala bloka saturu no tā malas. Polsterējums ir caurspīdīgs un ietver arī elementa fona attēlu vai fona krāsu. Elementa pildījuma apjoms tiek norādīts, izmantojot terminu “padding” CSS kodā. Piemēram, lai saturam pievienotu 25 pikseļu polsterējumu, var izmantot šādu kodu.
div {
platums: 300 pikseļi;
augstums: 300 pikseļi;
polsterējums: 25 pikseļi;
apmale: 25 pikseļi cieta;
}
Ja nepieciešams, var atsevišķi norādīt dažādas polsterējuma vērtības arī pa kreisi, pa labi, augšā un apakšā. Nākamajā koda daļā katrai pusei ir norādītas dažādas polsterējuma vērtības.
div {
platums: 300 pikseļi;
augstums: 300 pikseļi;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
apmale: 25 pikseļi cieta;
}
Kas ir starpība?
CSS (kaskādes stila lapās) mala ir vieta ārpus robežas. Tas atdala bloku no citiem blokiem. Piemale ir arī caurspīdīga, taču liela atšķirība ar polsterējumu ir tā, ka piemalē nav iekļauti fona attēli vai elementam piemērotas fona krāsas. Maržas apjoms CSS tiek norādīts, izmantojot terminu “margin”. Nākamajā koda daļā ap div bloku tika izmantota 25 pikseļu piemale.
div {
platums: 320 pikseļi;
augstums: 320 pikseļi;
apmale: 5 pikseļi ciets;
marža: 25 pikseļi;
}
Arī dažādām bloka pusēm var norādīt dažādas vērtības. Nākamajā koda daļā katrai pusei tiek piemērotas dažādas piemales vērtības.
div {
platums: 320 pikseļi;
augstums: 320 pikseļi;
apmale: 5 pikseļi ciets;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}
Kāda ir atšķirība starp piemali un polsterējumu?
• Polsterējums ir atstarpe starp apmali un saturu, savukārt mala ir atstarpe ārpus robežas.
• Polsterējums atdala bloka saturu no apmales. Piemale atdala vienu bloku no otra.
• Polsterējums sastāv no fona attēliem un fona krāsām, kas tiek lietotas saturam, savukārt piemale to nesatur.
• Blakus esošo bloku piemales var pārklāties, kamēr polsterējums nepārklājas.
Kopsavilkums:
Padding vs margin
Padding ir atstarpe bloka apmalē, kas atdala apmali no satura. Piemale ir atstatums ārpus robežas, kas atdala bloku no blakus esošajiem blokiem. Vēl viena atšķirība ir tā, ka polsterējums ietver fona attēlu un fona krāsas, kas tiek lietotas ap saturu, bet piemalē tās nav. Blakus esošo bloku piemales dažkārt var pārklāties, kad pārlūkprogramma atveido lapu, bet aizpildīšanai tas nenotiks.
