Element ของ HTML ที่มีค่าพื้นฐานนี้ก็เหมือนกันเกือบ หรือ ทุกๆ Elements ของ HTML สามารถสั่งงานด้วย Box model module ได้ อยู่ที่ว่าเราจะสั่งงานให้มันเป็นอะไรและมีความหมายในเชิง “Semantics” และการสื่อสารของข้อมูลในโลก WWW ยังไง ในเมื่อทุกอย่างต้องผ่านการตีความ เช่น

• อยากจะสั่ง <span> ให้แสดงผลเป็น Block ก็ย่อมทำได้ แต่ต้องดูว่าในโครงสร้าง HTML นั้นมันเหมาะสมหรือไม่
• อยากจะให้ <section> ให้แสดงเป็น inline ก็ย่อมทำได้ แต่ต้องดูว่า ทำไปเพื่ออะไร

ประเภทการแสดงผลของ กล่อง

CSS3 ทุกอย่างถือเป็น Box แต่การแสดงผลต่างกัน (CSS2 inline element ถือเป็น text level อันเดียวกันแต่อย่าสับสน)

อยากให้ กล่อง เป็นแบบไหน ให้สั่ง Display เอา และ display เป็น Property แรกที่จะขอพูดถึง แต่คงจะไม่ได้อธิบาย “ค่า” ที่เกิดขึ้นทั้งหมดในตอนนี้ โดยเฉพาะในหมวดหมู่การสั้งงานที่แสดงผลในกลุ่ม table และ ruby ผมขอพูดถึงเรื่องของ inline | block | inline-block | run-in และ none ก่อนนะครับ

Display

Property Display ถือเป็นคำสั่งหลักของ Box model ซึ่งจะสั่งให้เป็นอะไรให้ดูตามรายชื่อข้างล่างนี้ครับ

inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | none

Display สามารถสั่งงานได้กับทุกๆ elements โดยค่าเริ่มต้นสำหรับ Element ที่ไม่ได้ติดตั้งค่าจากโรงงานมาคือ inline ส่วน Element ใดใด ที่ถูกให้ค่ามาแทน inline ก็จะแสดงค่านั้นๆ

1. Display: inline

   Inline ถือเป็นค่าเริ่มต้นของทุกๆ Element คำที่เราใช้เรียกติดปากก็คือ “inline element” ต่อไปนี้ ผมจะเรียก Inline box(es)

   ในแถว คือแนวคิดสั้นๆ ง่ายๆ ของ Inline box นะครับ อะไรก็ตามที่มันแสดงอยู่ ในแถว ได้ โดยไม่ร่วงลงมาแสดงเป็นแถวอื่น ค่าแสดงพื้นฐานมันคือ Inline box ถ้าเราจะสั่ง อะไรก็ตาม ให้แสดงผลเป็น inline box ก็สั่งง่ายๆ

   p,h1,h2 {display: inline;}

   จากการเขียนด้านบน เมื่อเราใช้ p,h1,h2 เขียนต่อกัน ตัวหนังสือทั้งหมดจะเรียงอยู่ในแถวเดียวกัน เพราะว่าเราสั่งงานให้เป็นแบบ inline box

2. Display: block

   Block เป็นค่าเฉพาะ Element หรือบาง Element ที่ถูกติดตั้งมาจากโรงงาน ก่อนหน้านี้คำที่เราใช้เรียกติดปากคือ “Block Element” ต่อไปนี้ผมขอเรียก Block box(es)

   แถวใครแถวมัน คือแนวคิดง่ายๆ ที่เราสามารถมองเห็นด้วยตาเปล่าที่ Box นั้นๆ แสดงผล

   span,em,cite {display: block;}

   เมื่อเราเขียน span,em,cite ติดกัน การแสดงผลของทั้ง 3 elements ด้านบนนั้นจะอยู่แถวใครแถวมันไม่เรียงกันเหมือนปกติ

3. Display: inline-block

   เอาหละ มาถึงค่าที่หลายๆ คน งงงวยกับมันมานาน “inline-block” ตามคำบอกเล่าใน ทฤษฎีของ W3C ว่าเอาไว้ว่า “inline-block คือ คำสั่งที่เปลี่ยนให้ element ใดๆ นั้นแสดงผลภายใน แบบ Block box แต่มีพฤติกรรมภายนอกแบบ Inline box หรือ ข้างในแสดงผลแบบ Block box ข้างนอกแสดงแบบ Inline box”

   ข้างในหมายถึง ในกล่อง เช่นเมื่อเราสั่ง display inline-block ให้กับ li ไปแล้ว ข้างใน li นั้นจะเปลี่ยนค่าสภาวะแวดล้อมในเห็นเหมือน Block box (เราต้องไปดูอีกว่า คำสั่งอะไรบ้างที่เราจะสั่ง block box ได้) ส่วนภายนอก li จะแสดงผลเหมือน inline box เช่น การแสดงผลในแถวเดียวกัน ดังนั้น เมื่อเรามี li เรียงต่อกันหลายตัว แล้วเราสั่งเป็น inline-block ทำให้ li ทั้งหมดวิ่งไปเรียงติดๆ กันในแถวนั่นเอง

   ตัวอย่างของคำว่า ภายนอก ภายใน ก็เช่น การสั่งค่าภายใน อาทิ สั่ง margin ให้กับ inline-box ถ้าเราสั่งค่า margin-top หรือ margin-bottom ให้กับ element ที่ display แบบ inline อยู่ สั่งให้ตาย margin บน ล่าง ก็ไม่มา เพราะคำสั่งมันไปขัดกับกฎ Horizontal ของ Margin! คืออะไร ตามไปอ่านบทความ “CSS Collapsing margins การยุบรวมกันของ margins ใน CSS” ส่วนการสั่งค่า Margin ให้กับ box ที่ แสดงแบบ inline-block นั้นสามารถทำได้อยู่แล้ว เพราะภายในนั้นแสดงผลแบบ Block box

   งงไหมครับ งงนะ ผมก็งง โอเค ข้อต่อไป…

4. Display: run-in

   run-in มีประโยชน์แบบ “คิดไม่พบ” เลยทีเดียว แต่จะอธิบายยังไงดีวะให้มันเข้าตาม ทฤษฎี ผมสามารถอธิบายให้เข้าใจง่ายๆ ได้ แต่รายละเอียดมันจะเสียไป อ้าว… ลองดูก็ได้ เข้าใจง่าย แต่คนบอกกล่าว ผิดเต็มประตู เช่น

   การสั่ง run-in นั้นจะทำให้ element ที่ถูกสั่งงาน ค่าทางด้านซ้าย แสดงผลแบบ Block ค่าทางด้านขวา แสดงผลแบบ Inline และทำให้ค่าทางด้านซ้ายของ Element ที่อยู่ถัดไป 1 ตัว แสดงแบบ Inline

   เช่นถ้าเราเขียนโค้ดแบบ นี้

   <h2>ullamco laboris nisi ut aliquip.</h2>
   <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
   nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
   in reprehenderit in voluptate velit esse cillum</p>
   <h2>magni dolores eos qui</h2>
   <p>empora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
   Ut enim ad minima veniam, quis nostrum exercitationem ullam 
   corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatu</p>
   

   แล้วเราเขียน CSS แบบนี้

   h2 {display: run-in;}

   แล้วมันจะแสดงผล แบบนี้

   

   ใช่แล้วครับ p จะวิ่งตามติดตูด h2 โดยทันใด ซึ่งมันก็เข้ากันกับคำอธิบายก่อนหน้าที่บอกว่า ด้านซ้ายของ h2 แสดงแบบ block ด้านขวาแสดงแบบ inline และ ด้านซ้ายของ element ถัดไปคือ p แสดงแบบ inline ทำให้ p หันมาจูบดาก h2

   แต่คำอธิบายแบบนั้น มันผิด อย่างร้ายกาจ

   แล้วคำอธิบายที่เกือบถูกต้องหละครับ คืออะไร ฮ่วย! เชิญมางงงวยด้วยกัน

   run-in คือสภาพหนึ่งของกล่องที่แสดงผลคล้ายๆ กับ Inline box โดยขึ้นอยู่กับสถานะสุดท้ายของ Element นั้นๆ (inline box มันวิ่งติดกัน อยู่ในแถวเดียวกันใช่ไหมครับ) โดยมีกฎอันยากจะเข้าใจ ประมาณนี้ “ถ้า Block box ใดๆ อยู่ติดกับ element ที่ถูกสั่งให้ run-in นั่นหมายความว่า run-in box จะกลายเป็น inline box แรก ให้กับ Block ที่อยู่ถัดไปโดยทันที”

   ผมบอกแล้ว ว่าจะงง!! พูดง่ายๆ ตามตัวอย่างก็คือ h2 จะเป็น inline box แรก ให้กับ p นั่นเอง และทั้งคู่ เรียกว่า run-in box

5. Display: none

   คุ้นเคยกันดีครับ สำหรับสั่งไม่ให้แสดงตัวออกมา (ถือว่าเข้าใจกันทุกคน ไม่อธิบาย)

นอกจากนี้ยังมีคำว่า Block Level และ Inline Level อีกครับพี่น้อง ฮ้วย! คืออีหยังวะ เอาไว้ก่อนเด้อครับ เดี๋ยวตามมา ถ้าไม่ตามก็ถือว่าลืม! ผากไว้พร้อมๆ กับการสั่ง display อีกขโยงหนึ่งนั้นด้วย

บทความเหมือนมันจะยาวๆ นะครับ ยาวไม่ธรรมดา แต่อ่านแล้วยังไม่เข้าใจอีก เอาเป็นว่า ขอพักเอาไว้ก่อนในตอนแรก

โอกาศหน้า ถ้ายังหายใจ ผมจะมาอธิบายเรื่องที่เหลืออยู่ข้างล่าง ไปเรื่อยๆ ครับ

Paddings

Margins

Width และ Height

มีความเกี่ยวเนื่องโดยตรงกับ box-sizing ดู CSS3 Basic User Interface Module

‘min-width’, ‘max-width’, ‘min-height’ and ‘max-height’

Float

Clear เป็นส่วนหนึ่งของ Float

Overflow

Visibility

Rotating boxes

Stacking Contexts

Stacking contexts มีความเกี่ยวพันกันกับ CSS Selectors ::before และ ::after