เรียนรู้ความแตกต่างระหว่าง Element Block-level และ Inline-block ใน HTML
ใน HTML ทุก Element มีค่า Display เริ่มต้นที่สืบทอดมาจาก User Agent Stylesheet (UAS) ที่สร้างอยู่ในเบราว์เซอร์ทุกตัว
มี 2 ตัวเลือกค่า Display คือ Block และ Inline:
- Block ใน CSS:
display:block; - Inline ใน CSS:
display: inline-block;
พฤติกรรมหรือสไตล์ของ HTML Element ใดๆ มาจาก User Agent Stylesheet (UAS) ของเบราว์เซอร์ — ซึ่งคุณสามารถอัปเดตได้ง่าย ดังนั้น Element Block-level ใดๆ ก็สามารถแปลงเป็น Inline Element ด้วยการประกาศง่ายๆ: display: inline-block; — และในทางกลับกันก็ได้
Block-level Element คืออะไร?
ใน HTML Block-level Element คือ Element ที่ขึ้นบรรทัดใหม่เสมอ (เหมือน Line Break) และใช้ความกว้างเต็มของ Container (Parent Element)
เช่น เพิ่ม Element <div> ไว้ใต้ย่อหน้านี้ มันจะใช้ความกว้างเต็มของ Parent Container จากขอบซ้ายไปขอบขวา
ตัวอย่างโค้ด:
<div>I'm a block-level element.</div>ผลลัพธ์:
I'm a block-level element.
ดูยากว่ามันใช้ความกว้างเต็ม ลองเพิ่ม Border เพื่อให้เห็นชัด:
<div style="border:1px solid #dd4c4f">I'm a block-level element.</div>ผลลัพธ์:
I'm a block-level element.
ตอนนี้เห็นว่า Element <div> ใช้ความกว้างเต็มของ Container ซึ่งในเว็บนี้คือ Element <article>
Block-level Elements เริ่มบรรทัดใหม่ ดูโค้ดและการแสดงผล:
<div style="border:1px solid #dd4c4f">I'm a block-level element.</div> <div style="border:1px solid #dd4c4f">I'm another block-level element.</div>การแสดงผล:
I'm a block-level element.
I'm another block-level element.
หากสอง <div> เป็น Inline จะติดกันบน บรรทัดเดียวกัน (เห็นในส่วนถัดไป) แต่เพราะเป็น Block-level จึงอยู่บรรทัดของตัวเอง และแต่ละตัวใช้ความกว้างเต็มของ Parent Container
Element Block-level ทั้งหมดใน HTML
รายการครบของ Block-level Elements ใน HTML:
<address>- ข้อมูลติดต่อ
<article>- เนื้อหาบทความ
<aside>- เนื้อหาเคียงข้าง
<blockquote>- การอ้างอิงยาว (Block)
<details>- Widget เปิดเผยข้อมูล
<dialog>- กล่องโต้ตอบ
<dd>- บรรยายคำใน Description List
<div>- การแบ่งเอกสาร
<dl>- Description List
<dt>- คำใน Description List
<fieldset>- ป้ายกลุ่มฟิลด์
<figcaption>- คำบรรยาย Figure
<figure>- จัดกลุ่มสื่อพร้อมคำบรรยาย
<figcaption>) <footer>- ส่วนท้าย Section หรือ Page
<form>- ฟอร์มรับข้อมูล
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- ระดับหัวข้อ 1-6
<header>- ส่วนหัว Section หรือ Page
<hgroup>- จัดกลุ่มข้อมูล Header
<hr>- เส้นแบ่งแนวนอน
<li>- รายการใน List
<main>- Container เนื้อหาหลัก
<nav>- มีลิงก์นำทาง
<ol>- รายการลำดับ
<p>- ย่อหน้า
<pre>- ข้อความจัดรูปแบบล่วงหน้า
<section>- ส่วนของหน้าเว็บ
<table>- ตาราง
<ul>- รายการไม่มีลำดับ
Inline Elements คืออะไร?
ใน HTML Inline Elements คือ Element ที่ ไม่ เริ่มบรรทัดใหม่ และใช้พื้นที่แค่ที่จำเป็น (ความกว้างของเนื้อหา เช่น ความยาวข้อความ)
ตัวอย่างโค้ด:
<div style="display:inline-block;border:1px solid #dd4c4f;"> I'm a inline-block element </div>การแสดงผล:
I'm a inline block-element.
Inline Block Elements ไม่เริ่มบรรทัดใหม่ (Line Break)
ดังนั้น หากมี Inline Block Elements สองตัวติดกันในโค้ด:
<div style="display:inline-block;border:1px solid #dd4c4f"> I'm a inline block element. </div> <div style="display:inline-block;border:1px solid #dd4c4f"> I'm a another inline block element. </div>จะแสดงในเบราว์เซอร์แบบนี้:
I'm a inline block-element. I'm a inline another block-element.
เพื่อให้เห็นความแตกต่างชัดเจน เปรียบเทียบ "ติดกัน":
I'm a inline block-element. I'm a block-element.
Element Inline-block ทั้งหมดใน HTML
รายการ Inline Elements ใน HTML:
<a><abbr><acronym><audio>(เฉพาะที่มี Controls มองเห็น)<b><bdi><bdo><big><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed><iframe><img><input><ins><kbd><label><map><mark><meter><noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><tt><var><video><wbr>
ความแตกต่างสำคัญอีกอย่างระหว่าง Block & Inline
คุณเรียนรู้ว่า Block & Inline Elements ต่างกันใน:
- Full-width (Block) vs Content-width (Inline)
- New line (Block) vs Same line (Inline)
แต่มีความแตกต่างอีกอย่างในการใช้งาน:
- Inline Block Elements ไม่สามารถ บรรจุ Block-level Elements ได้
- Block Elements สามารถ บรรจุ Inline Block Elements ได้
ดังนั้น HTML นี้ ไม่ ถูกต้อง:
<span><p>Block element inside an inline block element.</p></span>แต่ HTML นี้ ถูกต้อง:
<p><span>Inline block element inside a block element.</span></p>แนวคิดเบื้องหลังการแยกโมเดลเนื้อหาโครงสร้างนี้คือ Block Elements ควรใช้บรรยายโครงสร้างใหญ่กว่า Inline Elements
จำไว้ ค่า display ของ HTML Element ใดๆ สามารถอัปเดตได้ใน CSS Stylesheet แต่สิ่งที่เห็นวันนี้คือการทำงานของ Block-level และ Inline-block Elements ตามค่าเริ่มต้น หากคุณไม่จัดสไตล์เอง
