பிளாக் மற்றும் இன்லைன் உறுப்புகளுக்கு இடையே என்ன வேறுபாடு?

Question

Accepted Answer

ஒவ்வொரு உறுப்புக்கும் இடம் திட்டத்தில் எவ்வாறு பாய்கிறது என்பதைக் கட்டுப்படுத்தும் **display** இயல்பு உள்ளது. - **Block** உறுப்புகள் **புதிய வரியில்** தொடங்கி **முழு கிடைக்கக்கூடிய அகலம்** ஆக்கிரமிக்கும். அவை அகலம்/உயரம் மற்றும் அனைத்து விளிம்பு/திணிப்புகளை ஏற்றுக்கொள்கின்றன. எடுத்துக்காட்டுகள்: `

`, `

`, `
`, `
`. - Inline உறுப்புகள் ஒரு வரியின் உள்ளே பாய்கின்றன, அவற்றின் உள்ளடக்கம் மட்டுமே அகலம், மற்றும் புறக்கணிக்கின்றன அகலம்/உயரம் மற்றும் மேல்/கீழ் விளிம்புகள். எடுத்துக்காட்டுகள்: ``, ``, ``, ``. ```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` உரை ஓட்டத்தில் (பக்கத்திற்குப் பக்கம்) அமர்ந்துள்ளது மற்றும்* அகலம்/உயரம்/விளிம்புகளை மதிக்கிறது – nav உறுப்புகள், முறை சீட்டுகள் அல்லது ஒரு வரியில் வைக்கப்பட்ட பொத்தான்களுக்கு சிறந்தது. ```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`-க்கு எப்போது மாற்றுவது என்பதை விளக்குகிறது। நீங்கள் எந்த இடம் வகுப்பையும் பயன்படுத்துவதற்கு முன்பு உறுப்புகள் எவ்வாறு ஒழுங்கமைக்கப்படுகின்றன என்பது இதன் ভিত்தி.