บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก
ทำความเข้าใจความแตกต่างของพฤติกรรมการแสดงผลแบบ block, inline และ inline-block
บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
พร็อพเพอร์ตี display
พร็อพเพอร์ตี display เป็นหนึ่งในพร็อพเพอร์ตีพื้นฐานที่สุดของ CSS โดยกำหนดว่าองค์ประกอบจะมีส่วนร่วมในลำดับการจัดวางอย่างไร เช่น สร้างกล่องระดับบล็อก กล่องแบบอินไลน์ หรือรูปแบบที่อยู่ระหว่างสองแบบนี้
องค์ประกอบแบบบล็อก
องค์ประกอบแบบบล็อกจะเริ่มต้นที่บรรทัดใหม่และขยายจนเต็มความกว้างของคอนเทนเนอร์ คุณสามารถกำหนดความกว้าง ความสูง ระยะขอบ และระยะห่างด้านในได้ทุกด้าน
องค์ประกอบแบบบล็อกตามค่าเริ่มต้น: div, p, h1-h6, section, article
<div>I'm a block element — full width, centered.</div>
องค์ประกอบแบบอินไลน์
องค์ประกอบแบบอินไลน์จะไหลไปพร้อมกับข้อความ และจะไม่เริ่มต้นที่บรรทัดใหม่ การกำหนด width หรือ height จะไม่มีผล ระยะขอบด้านบนและด้านล่างจะถูกละเว้น ส่วนระยะขอบและระยะห่างด้านในในแนวนอนยังทำงานได้
องค์ประกอบแบบอินไลน์ตามค่าเริ่มต้น: span, a, strong, em, img
<p>This is <span>an inline span</span> inside a paragraph.</p>
องค์ประกอบแบบอินไลน์บล็อก
display: inline-block เป็นรูปแบบผสม องค์ประกอบจะไหลแบบอินไลน์ (ไม่มีการบังคับขึ้นบรรทัดใหม่) แต่รองรับความกว้าง ความสูง และคุณสมบัติของโมเดลกล่องทั้งหมดเช่นเดียวกับองค์ประกอบแบบบล็อก
<a class="btn" href="#">Click Me</a>
การใช้ Inline-Block สำหรับแถบนำทาง
ก่อนมี Flexbox มักใช้ inline-block สำหรับแถบนำทางแนวนอน ข้อเสียคือช่องว่างในซอร์ส HTML จะสร้างช่องว่างเล็ก ๆ ระหว่างรายการ
<ul><li>Home</li><li>About</li><li>Contact</li></ul>
การลบช่องว่างระหว่างอินไลน์
สามารถลบช่องว่างระหว่างองค์ประกอบแบบอินไลน์บล็อกได้โดยกำหนด font-size: 0 ให้กับองค์ประกอบแม่แล้วคืนค่าขนาดให้กับองค์ประกอบลูก หรือกำจัดช่องว่างออกจาก HTML
<ul><li>One</li><li>Two</li><li>Three</li></ul>
การแทนที่ Inline-Block ด้วย Flex
ใน CSS สมัยใหม่ วิธีที่แนะนำสำหรับการจัดวางแนวนอนโดยไม่มีปัญหาช่องว่างคือกำหนด display: flex ให้กับองค์ประกอบแม่ ส่วน inline-block ยังมีประโยชน์สำหรับการกำหนดขนาดองค์ประกอบเดี่ยว
การเปลี่ยนรูปแบบการแสดงผล
สามารถเปลี่ยนรูปแบบการแสดงผลขององค์ประกอบใด ๆ ได้ด้วย CSS โดยมักใช้เพื่อทำให้ลิงก์มีรูปร่างเหมือนปุ่ม หรือทำให้รายการในลิสต์เรียงเป็นแนวนอน
<a class="button" href="#">Button</a>
<ul><li>Item 1</li><li>Item 2</li></ul>
ค่าการแสดงผลแบบตาราง
CSS มีค่า display: table, display: table-row, display: table-cell และค่าอื่น ๆ เพื่อใช้การจัดวางแบบตารางกับองค์ประกอบที่ไม่ใช่ตาราง ปัจจุบันไม่ค่อยจำเป็น แต่ยังมีประโยชน์สำหรับการจัดกึ่งกลางในแนวตั้งในบริบทแบบเก่า
รากของการไหล: display: flow-root
display: flow-root จะสร้างบริบทการจัดรูปแบบแบบบล็อกใหม่โดยไม่มีผลข้างเคียงของ overflow: hidden โดยจะล้างผลขององค์ประกอบลอยและป้องกันไม่ให้การยุบรวมของระยะขอบรั่วออกนอกคอนเทนเนอร์
<div class="clearfix">Contains floated children without collapsing.</div>
กล่องนิรนาม
เมื่อองค์ประกอบแบบบล็อกและแบบอินไลน์เป็นองค์ประกอบพี่น้องกัน เบราว์เซอร์จะห่อเนื้อหาแบบอินไลน์ที่ไม่มีเจ้าของไว้ในกล่องบล็อกนิรนาม พฤติกรรมนี้มองไม่เห็นโดยตรง แต่ช่วยอธิบายการเลื่อนของการจัดวางที่ไม่คาดคิดได้
ตรวจสอบอย่างรวดเร็ว
ค่า display ใดที่อนุญาตให้กำหนด width พร้อมกับให้องค์ประกอบยังอยู่ในลำดับการไหลแบบอินไลน์
สรุปทบทวน
องค์ประกอบแบบบล็อกจะใช้ความกว้างเต็มพื้นที่และเริ่มต้นที่บรรทัดใหม่ องค์ประกอบแบบอินไลน์จะไหลไปพร้อมกับข้อความและไม่สนใจความกว้างหรือความสูง Inline-block รวมคุณสมบัติของทั้งสองแบบไว้ด้วยกัน คือไหลแบบอินไลน์แต่รับความกว้างและความสูงได้ การจัดวางสมัยใหม่มักเลือกใช้ Flexbox และ Grid แทนกริดที่สร้างด้วย inline-block
คำถามที่พบบ่อย
บทเรียน “บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก”
ทำความเข้าใจความแตกต่างของพฤติกรรมการแสดงผลแบบ block, inline และ inline-block คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บล็อก เทียบกับอินไลน์ เทียบกับอินไลน์บล็อก
- Visibility เทียบกับ Display None
- Overflow: เลื่อน ตัด และอัตโนมัติ
- การรีเซ็ตและทำให้ CSS เป็นมาตรฐาน