Margin vs Padding
Տարբերությունը լուսանցքի և լիցքավորման միջև կարևոր ասպեկտ է CSS-ում, քանի որ լուսանցքը և լիցքը երկու կարևոր հասկացություններ են, որոնք օգտագործվում են CSS-ում՝ տարբեր տարրերի միջև տարածություն ապահովելու համար: Լիցքները և լուսանցքները փոխարինելի չեն և ունեն տարբեր նպատակներ, ուստի պետք է համապատասխանաբար օգտագործվեն: Լիցքավորումը բլոկի բովանդակության և եզրագծի միջև ընկած տարածությունն է: Մյուս կողմից, լուսանցքը բլոկի սահմանից դուրս տարածությունն է: Լուսանցքը բաժանում է բլոկները հարակից բլոկներից, մինչդեռ լիցքը բաժանում է եզրագիծը բովանդակությունից:
Ի՞նչ է լիցքավորումը:
CSS-ում (Cascading Style Sheets) լիցքավորումը բովանդակության և եզրագծի միջև պահվող տարածությունն է:Այն առանձնացնում է բլոկի բովանդակությունը դրա եզրից: Լիցքը թափանցիկ է և ներառում է նաև տարրի ֆոնի պատկերը կամ ֆոնի գույնը: Տարրի լիցքավորման չափը սահմանվում է CSS կոդում «padding» տերմինի օգտագործմամբ: Օրինակ՝ բովանդակության շուրջ 25 պիքսել լցոն ավելացնելու համար կարող եք օգտագործել հետևյալ կոդը։
div {
լայնություն՝ 300px;
բարձրություն՝ 300px;
լիցք՝ 25px;
սահման՝ 25px ամուր;
}
Անհրաժեշտության դեպքում, լցոնման տարբեր արժեքներ կարող են առանձին նշվել նաև ձախ, աջ, վերևի և ներքևի համար: Կոդի հետևյալ հատվածը յուրաքանչյուր կողմի համար նշում է լցոնման տարբեր արժեքներ։
div {
լայնություն՝ 300px;
բարձրություն՝ 300px;
padding-top՝ 25px;
padding-bottom՝ 35px;
padding-left՝ 5px;
padding-աջ՝ 10px;
սահման՝ 25px ամուր;
}
Ի՞նչ է մարժա?
CSS-ում (Cascading Style Sheets) լուսանցքը սահմանից դուրս տարածությունն է: Այն առանձնացնում է բլոկը այլ բլոկներից: Լուսանցքը նույնպես թափանցիկ է, բայց լիցքավորման հետ կապված մեծ տարբերությունն այն է, որ լուսանցքը չի ներառում ֆոնային պատկերներ կամ ֆոնային գույներ, որոնք կիրառվում են տարրի վրա: CSS-ում մարժայի չափը նշվում է «մարժա» տերմինի միջոցով: Կոդի հետևյալ հատվածը կիրառեց 25px լուսանցք div բլոկի շուրջ:
div {
լայնություն՝ 320px;
բարձրություն՝ 320px;
սահման՝ 5px ամուր;
մարժա՝ 25px;
}
Տարբեր արժեքներ կարող են սահմանվել նաև բլոկի տարբեր կողմերի համար: Կոդի հետևյալ հատվածը կիրառում է տարբեր լուսանցքների արժեքներ յուրաքանչյուր կողմի համար։
div {
լայնություն՝ 320px;
բարձրություն՝ 320px;
սահման՝ 5px ամուր;
մարժա-վերև՝ 25px;
լուսանցք-ներքև՝ 35px;
լուսանցք-ձախ՝ 5px;
լուսանցք-աջ՝ 10px;
}
Ո՞րն է տարբերությունը Margin-ի և Padding-ի միջև:
• Լիցքավորումը սահմանի և բովանդակության միջև ընկած տարածությունն է, մինչդեռ լուսանցքը սահմանից դուրս տարածությունն է:
• Լրացումն առանձնացնում է բլոկի բովանդակությունը եզրագծից: Լուսանցքը բաժանում է մի բլոկը մյուսից։
• Լիցքավորումը բաղկացած է ֆոնային պատկերներից և ֆոնի գույներից, որոնք կիրառվում են բովանդակության վրա, մինչդեռ լուսանցքը չի պարունակում այդպիսին:
• Հարակից բլոկների լուսանցքները կարող են համընկնել, մինչդեռ լցոնումը չի համընկնում:
Ամփոփում՝
Լիցք ընդդեմ լուսանցք
Padding-ը բլոկի սահմանի ներսում գտնվող տարածությունն է, որը բաժանում է եզրագիծը բովանդակությունից: Լուսանցքը սահմանից դուրս տարածությունն է, որը բաժանում է բլոկը հարակից բլոկներից: Մեկ այլ տարբերություն այն է, որ լիցքավորումը ներառում է ֆոնի պատկերը և ֆոնի գույները, որոնք կիրառվում են բովանդակության շուրջ, մինչդեռ լուսանցքը դրանք չի պարունակում: Հարակից բլոկների լուսանցքները երբեմն կարող են համընկնել, երբ զննարկիչը ներկայացնում է էջը, բայց լիցքավորման համար նման բան տեղի չի ունենա:
