CSS-ში Box Model მნიშვნელოვანი კონცეფციაა იმის დასადგენად, თუ როგორ არის სტრუქტურირებული და განლაგებული ელემენტი ვებგვერდზე. იგი შედგება ფუნდამენტური კომპონენტებისგან, როგორიცაა შინაარსი, Padding, Border და Margin.
Content
Content არის ტერიტორია, რომელიც შეიცავს ელემენტის რეალურ შინაარსს, როგორიცაა ტექსტი, სურათები ან ვიდეო.
შინაარსის ზომის დასადგენად ვიყენებთ width და height თვისებებს.
Padding
Padding არის სივრცე შინაარსის გარშემო, რომელიც ქმნის უფსკრული შინაარსსა და ელემენტს შორის border.
მნიშვნელობების დასაზუსტებლად padding ვიყენებთ padding-top, padding-right,padding-bottom და თვისებებს. padding-left
Border
ეს Border არის ელემენტის გარშემო არსებული მონახაზი, რომელიც ქმნის მკაფიო საზღვარს შინაარსსა და მიმდებარე ტერიტორიას შორის.
ფორმატირებისთვის border ჩვენ ვიყენებთ border-width, border-style, და border-color თვისებებს.
Margin
Margin არის სივრცე ელემენტის გარეთ border, რომელიც ქმნის უფსკრული სხვა ელემენტებს შორის.
მნიშვნელობების დასადგენად margin ვიყენებთ margin-top, და თვისებებს. margin-right margin-bottom margin-left
CSS- ის გამოყენებით Box Model, ჩვენ შეგვიძლია მოვარგოთ ელემენტის ზომა და პოზიცია მისი კომპონენტების მნიშვნელობების შეცვლით.
მაგალითი:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
ზემოთ მოყვანილ მაგალითში, კლასის მქონე ელემენტს .box აქვს სიგანე 200 პიქსელი და სიმაღლე 100 პიქსელი. მას აქვს 20px padding, შავი border 1px სისქით და 10px margin.
ამ მნიშვნელობების კორექტირებით, თქვენ შეგიძლიათ შექმნათ ელემენტები სხვადასხვა ზომისა და ინტერვალით თქვენს ვებ გვერდზე. -ის გამოყენებით Box Model, თქვენ გაქვთ კონტროლი თქვენს ინტერფეისში ელემენტების პოზიციონირებაზე, ზომასა და დაშორებაზე.