Margin vs Padding
განსხვავება ზღვარსა და ბალიშს შორის მნიშვნელოვანი ასპექტია CSS-ში, რადგან ზღვარი და padding არის ორი მნიშვნელოვანი კონცეფცია, რომელიც გამოიყენება CSS-ში სხვადასხვა ელემენტებს შორის მანძილის უზრუნველსაყოფად. ბალიშები და მინდვრები არ არის ურთიერთშემცვლელი და აქვთ განსხვავებული დანიშნულება, ამიტომ უნდა იქნას გამოყენებული სათანადოდ. padding არის სივრცე ბლოკის შიგთავსსა და საზღვარს შორის. მეორეს მხრივ, ზღვარი არის სივრცე ბლოკის საზღვრის გარეთ. ზღვარი ჰყოფს ბლოკებს მიმდებარე ბლოკებისგან, ხოლო ბალიშები აშორებს საზღვრებს შინაარსისგან.
რა არის პადინგი?
CSS-ში (კასკადური სტილის ფურცლები), padding არის სივრცე, რომელიც ინახება შიგთავსსა და საზღვრებს შორის.ის ჰყოფს ბლოკის შიგთავსს მისი კიდედან. ბალიშები გამჭვირვალეა და ასევე შეიცავს ელემენტის ფონის სურათს ან ფონის ფერს. ელემენტის შიგთავსის ოდენობა მითითებულია CSS კოდში ტერმინის „შეფუთვის“გამოყენებით. მაგალითად, კონტენტის გარშემო 25 პიქსელიანი ბალიშის დასამატებლად შეიძლება გამოყენებულ იქნას შემდეგი კოდი.
div {
სიგანე: 300px;
სიმაღლე: 300px;
შეფუთვა: 25px;
საზღვარი: 25px მყარი;
}
საჭიროების შემთხვევაში, სხვადასხვა ბალიშის მნიშვნელობები შეიძლება განისაზღვროს ცალ-ცალკე მარცხნივ, მარჯვნივ, ზედა და ქვედასთვის. კოდის შემდეგი ნაწილი განსაზღვრავს ბალიშის სხვადასხვა მნიშვნელობებს თითოეული მხარისთვის.
div {
სიგანე: 300px;
სიმაღლე: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
შეფუთვა-მარჯვნივ: 10px;
საზღვარი: 25px მყარი;
}
რა არის მარჟა?
CSS-ში (კასკადური სტილის ფურცლები) ზღვარი არის საზღვრის გარეთ არსებული სივრცე. ის გამოყოფს ბლოკს სხვა ბლოკებისგან. ზღვარი ასევე გამჭვირვალეა, მაგრამ დიდი განსხვავება ბალიშთან არის ის, რომ ზღვარი არ შეიცავს ფონის სურათებს ან ელემენტზე გამოყენებულ ფონის ფერებს. მარჟის ოდენობა CSS-ში მითითებულია ტერმინით „ზღვარი“. კოდის შემდეგმა ნაწილმა გამოიყენა 25 პიქსელიანი ზღვარი div ბლოკის გარშემო.
div {
სიგანე: 320px;
სიმაღლე: 320px;
საზღვარი: 5px მყარი;
ზღვარი: 25px;
}
სხვადასხვა მნიშვნელობები შეიძლება განისაზღვროს ბლოკის სხვადასხვა მხარისთვისაც. კოდის შემდეგი ნაწილი იყენებს ზღვრის სხვადასხვა მნიშვნელობებს თითოეული მხარისთვის.
div {
სიგანე: 320px;
სიმაღლე: 320px;
საზღვარი: 5px მყარი;
ზღვარი-ზედა: 25px;
ზღვარი-ქვედა: 35px;
ზღვარი-მარცხნივ: 5px;
ზღვარი-მარჯვნივ: 10px;
}
რა განსხვავებაა Margin-სა და Padding-ს შორის?
• შიგთავსი არის სივრცე საზღვრებსა და კონტენტს შორის, ხოლო ზღვარი არის სივრცე საზღვრის გარეთ.
• ბალიშები გამოყოფს ბლოკის შიგთავსს საზღვრიდან. ზღვარი ჰყოფს ერთ ბლოკს მეორისგან.
• შიგთავსი შედგება ფონის სურათებისა და ფონის ფერებისაგან, რომლებიც გამოიყენება კონტენტზე, ხოლო ზღვარი არ შეიცავს ასეთს.
• მიმდებარე ბლოკების მინდვრები შეიძლება გადაფარდეს, ხოლო შიგთავსი არ გადაფარავს.
რეზიუმე:
შეფუთვა vs Margin
შეფუთვა არის სივრცე ბლოკის საზღვრის შიგნით, რომელიც განასხვავებს საზღვრებს შინაარსისგან. ზღვარი არის მანძილი საზღვრის გარეთ, რომელიც ჰყოფს ბლოკს მიმდებარე ბლოკებისგან. კიდევ ერთი განსხვავება ისაა, რომ padding მოიცავს ფონის სურათს და ფონის ფერებს, რომლებიც გამოიყენება შინაარსის გარშემო, ხოლო ზღვარი არ შეიცავს მათ. მეზობელი ბლოკების მინდვრები შეიძლება ზოგჯერ გადაფარდეს, როდესაც ბრაუზერი ასახავს გვერდს, მაგრამ ჩასმისას მსგავსი რამ არ მოხდება.
