CSS-ში ყუთის მოდელი რა არის?

CSS-ში ყუთის მოდელი აღწერს, როგორ ითვლება სივრცე, რომელიც ელემენტს უჭირავს ვებგვერდზე. ის მოიცავს:

• შინაარსი: ზონა რეალურ შინაარსისთვის (ტექსტი, სურათები).
• Padding (შიდა შერევა): სივრცე შინაარსსა და ელემენტის საზღვრის შორის.
• Border (საზღვარი): საზღვარი, რომელიც გარშემორტყმული აქვს padding-სა და შინაარსს.
• Margin (გარე შერევა): სივრცე გარშემო საზღვრისა, რომელიც გამოყოფს მას სხვა ელემენტებისგან.

სტანდარტული მოდელი (box-sizing: content-box) განსაზღვრავს ზომას შინაარსის, padding-ის და border-ის ჯამით. Margin-ი ემატება საერთო სივრცეს, მაგრამ არ ახდენს გავლენას ელემენტის ზომაზე.

box-sizing: border-box თვისება იცვლის ელემენტის ზომის გამოთვლას, ჩართავს padding-სა და border-ს საერთო სიგანე და სიმაღლეში. ამ შემთხვევაში, ზომა განსაზღვრულია width/height-ით, ხოლო padding და border "საკუთარ ადგილს იკავებენ" შინაარსის შიგნით.

/* სტანდარტული მოდელი (ნაგულისხმევი) */
.element-content-box {
  width: 100px; /* შინაარსის ზომა */
  padding: 10px;
  border: 5px solid black;
  /* საერთო სიგანე: 100px (შინაარსი) + 10px (padding მარცხნივ) + 10px (padding მარჯვნივ) + 5px (საზღვარი მარცხნივ) + 5px (საზღვარი მარჯვნივ) = 130px */
}

/* border-box მოდელი */
.element-border-box {
  width: 100px; /* საერთო სიგანე: შინაარსი + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* შინაარსის ზომა: 100px - 10px (padding მარცხნივ) - 10px (padding მარჯვნივ) - 5px (საზღვარი მარცხნივ) - 5px (საზღვარი მარჯვნივ) = 70px */
}

ყუთის მოდელის გაგება მნიშვნელოვანია ელემენტების ზუსტი განლაგებისა და კომპოზიციისთვის გვერდზე.