ความแตกต่างระหว่างองค์ประกอบ block และ inline คืออะไร?

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` บนองค์ประกอบ inline จะไม่ทำอะไร วิธีแก้ไขคือเปลี่ยนการแสดงผลของมัน: ```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 ``` ## เหตุใดจึงมีความสำคัญ การทำความเข้าใจการแสดงผลเริ่มต้นอธิบายว่าทำไม `` ของคุณจึงไม่รับความสูง ทำไม `
` จึงซ้อนกัน และเมื่อใดที่ควรเปลี่ยนไปเป็น `inline-block`, `flex` หรือ `grid` นี่คือพื้นฐานของวิธีการจัดเรียงองค์ประกอบก่อนที่คุณจะใช้ระบบเลย์เอาต์ใด ๆ