Block and Inline

Block และ Inline Direction คืออะไร?

ใน CSS มีแนวคิดเรื่องทิศทาง (Direction) ที่มาจากโลกของการพิมพ์และการออกแบบเอกสาร เมื่อเราอ่านหนังสือหรือเอกสารภาษาอังกฤษ เราจะอ่านจากซ้ายไปขวา และเมื่อจบบรรทัดก็จะขึ้นบรรทัดใหม่จากบนลงล่าง

CSS นำแนวคิดนี้มาใช้โดยแบ่งเป็น 2 ทิศทางหลัก:

• Block Direction (ทิศทางบล็อก) - ทิศทางที่บล็อกของเนื้อหาเรียงตัวกันจากบนลงล่าง

• Inline Direction (ทิศทางอินไลน์) - ทิศทางที่ข้อความภายในบรรทัดจากซ้ายไปขวา

<div class="container">
  <div class="block-example">
    <h2>Block Direction (แนวตั้ง)</h2>
    <p>
      ย่อหน้าที่ 1 -
      บล็อกนี้จะอยู่ด้านบน
    </p>
    <p>
      ย่อหน้าที่ 2 -
      บล็อกนี้จะอยู่ตรงกลาง
    </p>
    <p>
      ย่อหน้าที่ 3 -
      บล็อกนี้จะอยู่ด้านล่าง
    </p>
  </div>
  <div class="inline-example">
    <h2>Inline Direction (แนวนอน)</h2>
    <p>
      <span>คำที่ 1</span>
      <span>คำที่ 2</span>
      <span>คำที่ 3</span>
      <span>คำที่ 4</span>
    </p>
  </div>
</div>

ทำความเข้าใจผ่านการเปรียบเทียบ

🧱 Block Direction เหมือนการเล่นเลโก้

• บล็อกแต่ละชิ้นจะซ้อนทับกัน
• ชิ้นใหม่จะวางอยู่ด้านบนหรือด้านล่างของชิ้นเดิม
• ไม่มีการเรียงตัวข้างๆ กัน

👥 Inline Direction เหมือนคนต่อแถว

• คนต่อแถวจะยืนข้างๆ กัน
• เมื่อแถวเต็มจะขึ้นแถวใหม่
• ไหลไปในทิศทางเดียวกัน