องค์ประกอบ Block และ Inline ใน HTML

องค์ประกอบ Block (Block Elements)

องค์ประกอบ Block แสดงบนหน้าจอเหมือนมี line break ก่อนและหลัง ตลอดเวลา และ ใช้ความกว้างเต็มที่ (100% ของพาเรนต์) ตัวอย่าง block elements:

หัวข้อ: <h1> ถึง <h6>
โครงสร้าง: <article>, <aside>, <section>, <div>
ข้อความ: <p>, <pre>, <blockquote>, <address>
รายการ: <ul>, <ol>, <li>, <dl>
ฟอร์ม: <form>, <fieldset>
ตาราง: <table>

ตัวอย่าง Block Elements

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>คอมไพเลอร์สำหรับภาษาโปรแกรมและเทคโนโลยีเว็บ</h3>
<p>คลิกลิงก์แต่ละตัวเพื่อใช้คอมไพเลอร์ออนไลน์:</p>
<nav>
  <a href="/compile_java_online.php">Java</a> |
  <a href="/php_terminal_online.php">PHP</a> |
  <a href="/online_jquery_editor.php">jQuery</a> |
  <a href="/compile_c_online.php">C</a> |
  <a href="/compile_cpp_online.php">C++</a> |
  <a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>เรายังมีคอมไพเลอร์สำหรับไลบรารี <acronym title="JavaScript">JS</acronym> อีกด้วย</p>
<address>
  ติดต่อเราที่ <a href="mailto:contact@tutorialspoint.com">admin</a>.<br>
  ชั้น 4,<br>
  อาคาร Incor9,<br>
  Kavuri Hills,<br>
  Madhapur, Hyderabad,<br>
  Telangana 500081
</address>
</body>
</html>

ผลลัพธ์: แต่ละ block element (h2, h3, p, nav, address) จะอยู่บรรทัดใหม่ ใช้ความกว้างเต็ม

องค์ประกอบ Inline (Inline Elements)

องค์ประกอบ Inline ไม่ขึ้นบรรทัดใหม่ และแสดงเรียงติดกันในประโยค/บรรทัดเดียวกัน ตัวอย่าง inline elements:

ลิงก์: <a>
ข้อความ: <abbr>, <em>, <strong>, <i>, <b>, <span>, <code>
ฟอร์ม: <button>, <input>, <textarea>, <select>, <label>
อื่นๆ: <img>, <time>, <br>, <sub>, <sup>

ตัวอย่าง Inline Elements

<!DOCTYPE html>
<html>
<body>
<h2>Coding Ground</h2>
<h3>คอมไพเลอร์สำหรับภาษาโปรแกรมและเทคโนโลยีเว็บ</h3>
<nav>
  <a href="/compile_java_online.php">Java</a> |
  <a href="/php_terminal_online.php">PHP</a> |
  <a href="/online_jquery_editor.php">jQuery</a> |
  <a href="/compile_c_online.php">C</a> |
  <a href="/compile_cpp_online.php">C++</a> |
  <a href="/online_angularjs_editor.php">AngularJS</a>
</nav>
<p>เรายังมีคอมไพเลอร์สำหรับไลบรารี <acronym title="JavaScript">JS</acronym> อีกด้วย</p>
</body>
</html>

ผลลัพธ์: ลิงก์ใน nav และ acronym "JS" แสดงเรียงติดกันในบรรทัดเดียวกัน วาง pointer ที่ "JS" จะเห็น tooltip "JavaScript"

ความแตกต่างสรุป

ลักษณะ	Block	Inline
ขึ้นบรรทัดใหม่	ใช่ (ก่อนและหลัง)	ไม่
ความกว้าง	เต็ม 100%	พอดีเนื้อหา
ตั้งค่า width/height	ได้	ไม่ได้ (ต้องใช้ display:block/inline-block)
Margin ทุกทิศ	ได้	ได้แค่ left/right (top/bottom ไม่ทำงาน)
Padding ทุกทิศ	ได้	ได้ (แต่ top/bottom อาจทับ element อื่น)
สามารถบรรจุ	Block และ Inline	Inline เท่านั้น (ไม่ควรบรรจุ block)

การเปลี่ยน Display Type

สามารถเปลี่ยนพฤติกรรมได้ด้วย CSS display property:

display: block — ทำให้ inline element พฤติกรรมแบบ block
display: inline — ทำให้ block element พฤติกรรมแบบ inline
display: inline-block — ผสม: เรียงติดกันได้ แต่ตั้ง width/height/margin/padding ได้หมด
display: none — ซ่อน element เลย