CSS-ში display თვისების ძირითადი მნიშვნელობა რა არის და როგორ მუშაობს?

display თვისება განსაზღვრავს, როგორ გამოჩნდება ელემენტი დოკუმენტში და როგორ ურთიერთქმედებს სხვა ელემენტებთან, მონაწილეობს განლაგების (layout flow)-ში. იგი განსაზღვრავს ელემენტის ფორმატირების ტიპს:

ძირითადი მნიშვნელობები:

• block: ელემენტი ფორმატდება ბლოკად. იკავებს მთელ ხელმისაწვდომ სიგანეს, იწყება ახალი ხაზიდან, შეიძლება ჰქონდეს მითითებული ზომები (width, height).
• inline: ელემენტი ფორმატდება ხაზის სახით. არ იწყებს ახალ ხაზს, იკავებს მხოლოდ საჭირო სიგანეს, არ შეიძლება ჰქონდეს მითითებული ზომები (width, height), ვერტიკალური მარკერები (margin-top, margin-bottom) და შიდა მარკერები (padding-top, padding-bottom) არ ზემოქმედებს მიმდებარე ელემენტებზე.
• inline-block: ელემენტი ფორმატდება ხაზის სახით, მაგრამ როგორც ბლოკი within a line. არ იწყებს ახალ ხაზს, შეიძლება ჰქონდეს მითითებული ზომები (width, height), ასევე ვერტიკალური მარკერები და შიდა მარკერები, რომლებიც ზემოქმედებს მიმდებარე ელემენტებზე.
• none: ელემენტი და მისი შინაარსი არ ჩანს. ელემენტი სრულად ამოღებულია დოკუმენტის ნაკადიდან, არ იკავებს ადგილს.
• flex: ელემენტი ხდება Flex კონტეინერი, ხოლო მისი პირდაპირი შთამომავლები — Flex ელემენტები. გამოიყენება მოქნილი განლაგებების შესაქმნელად.
• grid: ელემენტი ხდება Grid კონტეინერი. გამოიყენება ქსელზე დაფუძნებული განლაგებების შესაქმნელად.

როგორ მუშაობს:

ბრაუზერი იყენებს display მნიშვნელობას იმის განსაზღვრად, თუ რა ტიპის ფორმატირების კონტექსტშია ელემენტი. ეს გავლენას ახდენს:

• დოკუმენტის ნაკადი: როგორ განლაგდება ელემენტი თავის მეზობლებთან მიმართებაში.
• ელემენტის ზომები: შესაძლებლობა განსაზღვროს სიგანე და სიმაღლე, შინაარსის გავლენა ზომებზე.
• მეზობელი ელემენტებზე გავლენა: როგორ ზეგავლენენ მარკერები და ზომები სხვა ელემენტების განლაგებაზე.

მაგალითი:

/* `display: block` ელემენტი */
div {
  display: block;
  width: 100%; /* იკავებს მთელ სიგანეს */
  margin-bottom: 10px; /* ქმნის ვერტიკალურ დაშორებას */
}

/* `display: inline` ელემენტი */
span {
  display: inline;
  /* width და height იგნორირებულია */
  /* margin-top და margin-bottom იგნორირებულია */
}

/* `display: inline-block` ელემენტი */
img {
  display: inline-block;
  width: 100px; /* სიგანე შეიძლება განსაზღვროს */
  height: 100px; /* სიმაღლე შეიძლება განსაზღვროს */
  margin: 5px; /* ქმნის დაშორებებს ყველა მხრიდან */
}

/* დამალული ელემენტი */
.hidden {
  display: none;
}