ปริศนาคำสั่ง display: block และ display: inline ของ CSS

จากคราวที่แล้วเราได้เรียนรู้ถึงลักษณะการแสดงผลของแท็กแบบ Block และแท็กแบบ Inline ที่แตกต่างกัน ถ้าจะให้เนื้อหาครอบคลุมและมีความต่อเนื่องอีกซักหน่อยก็คงต้องพูดถึงคำสั่ง display ของ CSS ด้วย

ค่าหลักๆที่เราใช้กันสำหรับคำสั่ง display คือ block และ inline ซึ่งเดาไม่ยากว่าต้องมีความเกี่ยวข้องโดยตรงกับกับแท็ก HTML แบบ Block และ Inline อย่างแน่นอน ประโยชน์ของค่า block และ inline ของคำสั่ง display ก็คือ คุณสามารถเปลี่ยนคุณลักษณะการแสดงผลของแท็กแบบ Block ให้เป็นเหมือนกับแท็กแบบ Inline และในทางกลับกันคือให้คุณสามารถเปลี่ยนคุณลักษณะของการแสดงผลของแท็กแบบ Inline ให้เป็นเหมือนกับแท็กแบบ Block ได้

display: inline

แท็กที่เป็นแบบ Block พอถูกใส่คำสั่ง display: inline เข้าไป ลักษณะการแสดงผลบนหน้าเว็บบราวเซอร์ก็จะเปลี่ยนเป็นแบบ Inline ทันที นั่นคือข้อความในแท็กนั้นจะไม่ขึ้นบรรทัดใหม่, ความกว้างของแท็กจะยาวเท่ากับความยาวของข้อความ และค่าอื่นๆไม่ว่าจะเป็นจากคำสั่ง margin-top, margin-bottom, padding-top หรือ padding-bottom จะไม่มีผลใดๆทั้งสิ้น

ตัวอย่างเช่น
เมื่อคุณต้องการให้ข้อความในแท็กแบบ Block ที่คุณใช้เรียงขึ้นไปแสดงเป็นแถวเดียวกัน เช่น <h4>The No.1 Browser</h4><h3>Google Chrome</h3> แต่เมื่อเราใส่คำสั่ง CSS นี้เข้าไป
h3, h4 {
display: inline;
}
การแสดงผลของหน้าเว็บจะเปลี่ยนไปเป็นดังรูปนี้

display: block

แท็กที่เป็นแบบ Inline เมื่อใช้คำสั่ง display: block แท็กนั้นก็จะได้ลักษณะการแสดงผลบนหน้าเว็บบราวเซอร์แบบ Block กล่าวคือข้อความในแท็กนั้นจะขึ้นบรรทัดใหม่ทันที, ความกว้างและความสูงในตอนแรกจะยังเหมือนเดิม แต่คราวนี้คุณจะสามารถใช้คำสั่ง width และ height เพื่อระบุขนาดของกล่องข้อความได้ และคำสั่งใดๆที่เกี่ยวกับ margin-top, margin-bottom, padding-top และ padding-bottom จะเริ่มมีผลทันที

ตัวอย่างเช่น
เมื่อคุณต้องการให้ข้อความในแท็กแบบ Inline ที่คุณใช้ขึ้นบรรทัดใหม่ เช่น <h4>The No.1 Browser <a href=”http://www.google.com/chrome” title=”Google Chrome”>Google Chrome</a><h4> การแสดงผลบนหน้าเว็บบราวเซอร์จะเป็นเช่นนี้ แต่พอเราใส่คำสั่ง CSS นี้เข้าไป
a {
display: block;
background: #660;
}
การแสดงผลของหน้าเว็บจะเปลี่ยนไปเป็นดังรูปนี้

ในกรณีของแท็ก <a> นี้ ถ้าคุณเพิ่มคำสั่ง width และ height เข้าไปด้วย นอกจากคุณจะได้กล่องข้อความในแท็ก <a> ตามขนาดที่ต้องการแล้ว ขอบเขตการคลิกได้ก็จะกว้างขึ้นตามขนาดไปด้วย
a {
display: block;
background: #660;
width: 200px;
height: 100px;
}

นี่เป็นเพียงตัวอย่างเล็กๆน้อยๆในเบื้องต้นของการประยุกต์นำคำสั่ง display: block และ display: inline ไปใช้ แต่ผมต้องบอกกันนิดนึงนะครับว่าการที่เราใช้คำสั่งนี้ในการเปลี่ยนลักษณะการแสดงผลของแท็กที่ต้องการเป็นแบบ Block หรือ Inline นั้น ไม่ได้เปลี่ยนความเป็นแท็กแบบ Block หรือ Inline จริงๆของแท็กนั้นนะครับ แต่เป็นเพียงการปรับเปลี่ยนการแสดงผลบนหน้าบราวเซอร์เท่านั้นเอง

ไหนๆก็พูดถึงคำสั่ง display: block และ display: inline แล้วจะไม่พูดถึงคำสั่ง display: none ก็กระไรอยู่ งั้นผมขอแถมให้อีกนิดนึงนะครับ คำสั่ง display: none นี้มีผลทำให้ข้อความในแท็กที่ถูกสั่งด้วยคำสั่งนี้ไม่แสดงบนหน้าเว็บบราวเซอร์ครับ เช่นเมื่อคุณต้องการซ่อนข้อความในแท็ก <a> คุณก็สามารถทำได้ง่ายๆด้วยการเปลี่ยนคำสั่ง display: block; ให้เป็น display: none; ดังนี้
a {
display: none;
background: #660;
width: 200px;
height: 100px;
}

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

ข้อควรระวังสำหรับการใช้คำสั่ง display: none ก็คือ คุณสามารถซ่อนข้อความในแท็กที่ต้องการไม่ให้ผู้อ่านทั่วไปเห็นบนเว็บบราวเซอร์ได้ แต่คุณไม่สามารถซ่อนจากการค้นหาของ bot จากเหล่า Search Engine ที่เข้าไปเก็บข้อมูลบนหน้าเว็บของคุณได้นะครับ และหากผู้อ่านของคุณรู้จักปิดการใช้ CSS ของหน้าได้ข้อความที่ซ่อนไว้ก็จะปรากฏให้เห็นได้ครับ แนะนำให้ใช้ในระยะเวลาไม่นานครับ และเมื่อไม่ใช้ข้อความในแท็กที่ว่าแล้ว ก็ควรลบแท็กข้อความที่ว่าออกจากหน้าเว็บไปเลยครับ

จริงๆแล้วยังมีค่าอื่นๆของคำสั่ง display อีกหลายค่า ไม่ว่าจะเป็นค่า list-item, run-in, compact, marker หรือ table แต่เว็บบราวเซอร์หลายๆยี่ห้อยังไม่ค่อยรองรับการแสดงผลของค่าที่ว่า อีกทั้งยังไม่ค่อยเป็นที่นิยมใช้เท่าไหร่นัก เพราะฉะนั้นในปัจจุบันนี้ค่ำคำสั่งหลักๆที่เราเห็นใช้ๆกันอยู่เป็นประจำก็เป็นค่า display: block; display: inline และ display: none; เท่านั้นครับ