რა განსხვავებაა ბლოკ და ინლაინ ელემენტებს შორის?

Question

Accepted Answer

თითოეულ ელემენტს აქვს ნაგულისხმევი **display** ქცევა, რომელიც აკონტროლებს როგორ მოძრაობს ის განწყობაში. - **ბლოკის** ელემენტები იწყება **ახალ ხაზზე** და იღებენ **მთელ ხელმისაწვდომ სიგრძეს**. ისინი იღებენ სიგრძე/სიმაღლე და ყველა მარჯნისა/შიგთავსს. მაგალითები: `

`, `

`, `
`, `
`. - ინლაინი ელემენტები მოძრაობენ ხაზის შიგნით, მხოლოდ მათი ხაზის სიგანით, და უკიდურესდ თავს აარიდებენ სიგრძე/სიმაღლე და ზემო/ქვემო მარჯნას. მაგალითები: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## პრაქტიკული პრობლემა ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` `width`/`height` დაყენება ინლაინი ელემენტზე არაფერი აკეთებს. გამოსწორება არის მისი display ის შეცვლა: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — ორივე პირის საუკეთესო `inline-block` სხედს ტექსტის ნაკადში (ერთმანეთის გვერდით) და* იძლევა სიგრძე/სიმაღლე/მარჯნას — იდეალურია ნავიგაციის ელემენტებისთვის, ბეჭდებისთვის, ან მწკრივში განთავსებული ღილაკებისთვის. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## რატომ მნიშვნელოვანია ნაგულისხმევი display ის გაგება განმარტავს რატომ არ მიიღებს თქვენი `` სიმაღლეს, რატომ იწყობა `
` გარეთ, და როდის უნდა გადავიდეთ `inline-block` ზე, `flex` ზე, ან `grid` ზე. ეს არის საფუძველი იმისა, თუ როგორ ეწყობა ელემენტები მანამ, სანამ გამოიყენებთ რომელიმე განწყობის სისტემას.