บล็อก HTML และองค์ประกอบอินไลน์
องค์ประกอบ HTML ทุกรายการมีค่าแสดงเริ่มต้น ขึ้นอยู่กับประเภทขององค์ประกอบ
มีสองค่าที่แสดง: บล็อกและอินไลน์
องค์ประกอบระดับบล็อก
องค์ประกอบระดับบล็อกจะเริ่มต้นในบรรทัดใหม่เสมอ
องค์ประกอบระดับบล็อกจะใช้ความกว้างเต็มที่เสมอ (ขยายไปทางซ้ายและขวาให้มากที่สุด)
องค์ประกอบระดับบล็อกมีระยะขอบด้านบนและด้านล่าง ในขณะที่องค์ประกอบแบบอินไลน์ไม่มี
ตัวอย่าง
<div>Hello World</div>
นี่คือองค์ประกอบระดับบล็อกใน HTML:
องค์ประกอบแบบอินไลน์
องค์ประกอบแบบอินไลน์ไม่ขึ้นบรรทัดใหม่
องค์ประกอบแบบอินไลน์ใช้ความกว้างเท่าที่จำเป็นเท่านั้น
นี่คือองค์ประกอบ <span> ภายในย่อหน้า
ตัวอย่าง
<span>Hello World</span>
นี่คือองค์ประกอบแบบอินไลน์ใน HTML:
หมายเหตุ:องค์ประกอบแบบอินไลน์ไม่สามารถมีองค์ประกอบระดับบล็อกได้!
<div> องค์ประกอบ
องค์ประกอบ<div>นี้มักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML อื่นๆ
องค์ประกอบ<div>ไม่มีแอตทริบิวต์ที่จำเป็น แต่style, classและidเป็นเรื่องธรรมดา
เมื่อใช้ร่วมกับ CSS <div>สามารถใช้องค์ประกอบเพื่อจัดรูปแบบบล็อกของเนื้อหาได้:
ตัวอย่าง
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<span> องค์ประกอบ
องค์ประกอบ<span>นี้เป็นคอนเทนเนอร์แบบอินไลน์ที่ใช้ทำเครื่องหมายส่วนของข้อความหรือส่วนหนึ่งของเอกสาร
องค์ประกอบ<span>ไม่มีแอตทริบิวต์ที่จำเป็น แต่style, classและidเป็นเรื่องธรรมดา
เมื่อใช้ร่วมกับ CSS คุณ<span>สามารถใช้องค์ประกอบเพื่อจัดรูปแบบส่วนต่างๆ ของข้อความได้:
ตัวอย่าง
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
สรุปบท
- มีสองค่าที่แสดง: block และ inline
- องค์ประกอบระดับบล็อกจะเริ่มต้นในบรรทัดใหม่เสมอและใช้ความกว้างเต็มที่มีอยู่
- องค์ประกอบแบบอินไลน์ไม่ได้เริ่มต้นในบรรทัดใหม่ และใช้ความกว้างเท่าที่จำเป็นเท่านั้น
- องค์ประกอบ
<div>นี้เป็นระดับบล็อกและมักใช้เป็นคอนเทนเนอร์สำหรับองค์ประกอบ HTML อื่นๆ - องค์ประกอบ
<span>นี้เป็นคอนเทนเนอร์แบบอินไลน์ที่ใช้ทำเครื่องหมายส่วนของข้อความหรือส่วนหนึ่งของเอกสาร
แท็ก HTML
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา