CSS - block และ inline

แท็ก html นั้น ถูกแบ่งออกเป็น 2 แบบ ด้วยกันคือ block และ inline

ตัวอย่างแท็กแบบ Block คือ <h1> ถึง <h6>, <p>, <ul>, <ol>, <dl>, <table>, <form> และ <div>
ตัวอย่างแท็กแบบ Inline คือ <strong>, <em>, <img>, <a>, <sub>, <sup>, <cite> และ <span>

แท็กแบบ Block ออกแบบมาเพื่อสร้างโครงสร้างหลักของหน้า
แท็กแบบ Inline ออกแบบมาเพื่อเพิ่มรายละเอียดภายในโครงสร้างนั้น

การแสดงผลบนหน้าเว็บมีความแตกต่างกันดังนี้คือ

แท็กแบบ Block จะมีความกว้างเต็มบรรทัดเต็มพื้นที่
แท็กแบบ Inline จะมีความกว้างเท่ากับข้อความที่อยู่ในนั้น

แท็กแบบ Block จะขึ้นบรรทัดใหม่เสมอ
แท็กแบบ Inline จะเกาะกลุ่มเรียงกันอยู่บนบรรทัดเดียวกัน

การสั่ง margin-top, margin-bottom, padding-top, padding-bottom, width และ height กับแท็กแบบ inline จะไม่มีผลใดๆทั้งสิ้น

แทนที่จะเขียนโค้ต HTML แบบนี้

<div>
<ul>
<li>ข้อความที่หนึ่ง</li>
<li>ข้อความที่สอง</li>
<li>ข้อความที่สาม</li>
</ul>
</div>

แต่เรารู้ว่า <ul> เป็นแท็กแบบ Block อยู่แล้ว ก็ไม่จำเป็นต้องเขียน <div> ซึ่งเป็นแท็กแบบ Block เหมือนกันให้ซ้ำซ้อน แล้วตัดให้เหลือเพียง

<ul>
<li>ข้อความที่หนึ่ง</li>
<li>ข้อความที่สอง</li>
<li>ข้อความที่สาม</li>
</ul>

หรือแทนที่เราจะเขียนคำสั่ง CSS แบบนี้

ul {
display: block;
width: 400px;
padding: 10px;
}

แต่ในเมื่อ <ul> เป็นแท็กแบบ Block การเขียนคำสั่ง display: block จึงไม่มีความจำเป็นใดๆทั้งสิ้น จึงสามารถตัดคำสั่งดังกล่าวให้เหลือเพียง

ul {
width: 400px;
padding: 10px;
}