ทุกองค์ประกอบมีพฤติกรรม display เริ่มต้นที่ควบคุมวิธีการไหลไปในเลย์เอาต์
<div>, <p>, <h1>, <section>, <ul><span>, <a>, <strong>, <em><p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong> stays inline; the two <div>s below stack vertically -->
<div>Block one</div>
<div>Block two</div>
span { width: 200px; height: 50px; } /* ❌ ignored — span is inline */
การตั้งค่า width/height บนองค์ประกอบ inline จะไม่ทำอะไร วิธีแก้ไขคือเปลี่ยนการแสดงผลของมัน:
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
inline-block นั่งในการไหลของข้อความ (ข้างเคียง) และ เคารพความกว้าง/ความสูง/ระยะขอบ – ใช้ได้ดีสำหรับรายการนำทาง ตราสัญลักษณ์ หรือปุ่มที่จัดวางในแถว
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
การทำความเข้าใจการแสดงผลเริ่มต้นอธิบายว่าทำไม <span> ของคุณจึงไม่รับความสูง ทำไม <div> จึงซ้อนกัน และเมื่อใดที่ควรเปลี่ยนไปเป็น inline-block, flex หรือ grid
นี่คือพื้นฐานของวิธีการจัดเรียงองค์ประกอบก่อนที่คุณจะใช้ระบบเลย์เอาต์ใด ๆ