CSS Display Property: Block, Inline, Inline-Block

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการจัดรูปแบบข้อความ วันนี้เราจะมาทำความเข้าใจกับคุณสมบัติ display ใน CSS ซึ่งเป็นหัวใจสำคัญของการจัดวางองค์ประกอบต่างๆ บนหน้าเว็บไซต์ คุณสมบัติ display จะกำหนดว่าองค์ประกอบ HTML ควรแสดงผลอย่างไร และมีปฏิสัมพันธ์กับองค์ประกอบอื่นๆ อย่างไรบ้าง โดยเราจะเน้นไปที่ค่า block, inline, และ inline-block ซึ่งเป็นค่าที่ใช้บ่อยที่สุด

Block Elements

Block elements คือองค์ประกอบที่กินพื้นที่เต็มความกว้างของ parent element เสมอ และเริ่มต้นในบรรทัดใหม่เสมอ (ขึ้นบรรทัดใหม่ก่อนและหลังองค์ประกอบนั้นๆ) ยกตัวอย่างเช่น:

<div>
<p> (paragraph)
<h1> ถึง <h6> (headings)
<ul>, <ol>, <li> (lists)
<form>
<header>, <footer>, <section>, <article> (semantic HTML5 elements)

ลองดูตัวอย่างโค้ด:

<div style="background-color: lightblue;">
  This is a block element.
</div>
<div style="background-color: lightgreen;">
  This is another block element.
</div>

เมื่อนำโค้ดนี้ไปแสดงผลในเบราว์เซอร์ คุณจะเห็นว่าแต่ละ <div> จะแสดงผลในบรรทัดใหม่ และกินพื้นที่เต็มความกว้างของหน้าเว็บ (หรือ parent element ที่มันอยู่)

คุณสมบัติที่สำคัญของ Block Elements:

กินพื้นที่เต็มความกว้าง (default)
เริ่มต้นในบรรทัดใหม่
สามารถกำหนด width และ height ได้
มี padding, margin, และ border ได้ทุกด้าน

Inline Elements

Inline elements จะกินพื้นที่เฉพาะส่วนที่จำเป็นต่อการแสดงผลเท่านั้น ไม่ขึ้นบรรทัดใหม่ และอนุญาตให้องค์ประกอบอื่นๆ มาอยู่ข้างๆ ได้ ยกตัวอย่างเช่น:

<span>
<a> (link)
<img> (image)
<strong>, <em> (emphasis)
<br> (line break)
<code>

ลองดูตัวอย่างโค้ด:

<span style="background-color: lightblue;">This is an inline element.</span>
<span style="background-color: lightgreen;">This is another inline element.</span>

เมื่อนำโค้ดนี้ไปแสดงผลในเบราว์เซอร์ คุณจะเห็นว่าทั้งสอง <span> จะแสดงผลในบรรทัดเดียวกัน

คุณสมบัติที่สำคัญของ Inline Elements:

กินพื้นที่เฉพาะส่วนที่จำเป็น
ไม่อยู่ในบรรทัดใหม่
ไม่สามารถกำหนด width และ height ได้ (โดยตรง)
padding และ margin ในแนวตั้ง (top/bottom) จะไม่มีผล

ข้อผิดพลาดที่พบบ่อย: หลายคนพยายามกำหนด width หรือ height ให้กับ inline elements โดยตรง ซึ่งจะไม่ได้ผลลัพธ์ที่ต้องการ หากต้องการกำหนดขนาดให้กับ inline element คุณจะต้องเปลี่ยน display เป็น inline-block ก่อน

Inline-Block Elements

Inline-block elements เป็นลูกผสมระหว่าง block elements และ inline elements มันจะวางตัวเหมือน inline element คือไม่อยู่ในบรรทัดใหม่ และอนุญาตให้องค์ประกอบอื่นๆ มาอยู่ข้างๆ ได้ แต่ในขณะเดียวกันก็สามารถกำหนด width, height, padding, และ margin ได้เหมือน block element

ตัวอย่างการใช้งาน:

<div style="background-color: #eee;">
  <div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue; margin: 10px;">Box 1</div>
  <div style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen; margin: 10px;">Box 2</div>
  <div style="display: inline-block; width: 100px; height: 50px; background-color: lightcoral; margin: 10px;">Box 3</div>
</div>

ในตัวอย่างนี้ เราใช้ <div> ซึ่งเป็น block element โดยปกติ แต่เรากำหนด display: inline-block; ให้กับ <div> แต่ละอัน ทำให้มันเรียงต่อกันในแนวนอน และเรายังสามารถกำหนด width, height, และ margin ให้กับมันได้ด้วย

คุณสมบัติที่สำคัญของ Inline-Block Elements:

วางตัวเหมือน inline element (ไม่อยู่ในบรรทัดใหม่)
สามารถกำหนด width และ height ได้
มี padding, margin, และ border ได้ทุกด้าน

ตารางสรุปความแตกต่าง

คุณสมบัติ	Block	Inline	Inline-Block
ความกว้าง	เต็มความกว้าง	เฉพาะส่วนที่จำเป็น	กำหนดได้
ความสูง	กำหนดได้	กำหนดไม่ได้	กำหนดได้
ขึ้นบรรทัดใหม่	ขึ้นบรรทัดใหม่	ไม่อยู่ในบรรทัดใหม่	ไม่อยู่ในบรรทัดใหม่
padding/margin (top/bottom)	มีผล	ไม่มีผล	มีผล

กรณีใช้งานจริง

Block: ใช้สำหรับโครงสร้างหลักของหน้าเว็บ เช่น header, footer, navigation, section, article
Inline: ใช้สำหรับข้อความที่ต้องการจัดรูปแบบเฉพาะจุด เช่น เน้นข้อความ (<strong>, <em>), ใส่ลิงก์ (<a>)
Inline-Block: ใช้สำหรับสร้าง navigation menu (list items เรียงกันในแนวนอน), ปุ่มต่างๆ, หรือองค์ประกอบอื่นๆ ที่ต้องการให้เรียงกันในแนวนอนและสามารถกำหนดขนาดได้

การเปลี่ยน Display Type

คุณสามารถเปลี่ยน display type ขององค์ประกอบ HTML ได้โดยใช้ CSS ตัวอย่างเช่น:

/* เปลี่ยนให้ paragraph แสดงผลเป็น inline */
p {
  display: inline;
}

/* เปลี่ยนให้ link แสดงผลเป็น block */
a {
  display: block;
}

/* เปลี่ยนให้ list item แสดงผลเป็น inline-block */
li {
  display: inline-block;
}

การเปลี่ยน display type นี้มีประโยชน์มากในการปรับแต่ง layout ของเว็บไซต์ให้ตรงกับความต้องการของคุณ

สรุป

คุณสมบัติ display เป็นเครื่องมือที่สำคัญสำหรับการจัดวางองค์ประกอบต่างๆ บนหน้าเว็บไซต์ การเข้าใจความแตกต่างระหว่าง block, inline, และ inline-block จะช่วยให้คุณสร้าง layout ที่ซับซ้อนและยืดหยุ่นได้ ในบทต่อไป เราจะพูดถึง CSS Positioning ซึ่งเป็นอีกหนึ่งเครื่องมือที่ทรงพลังสำหรับการจัดวางองค์ประกอบในตำแหน่งที่ต้องการ