การใช้ Display Inline-Block ใน CSS

องค์ประกอบที่ตั้งค่า display: inline-block จะแสดงเป็น inline-level block container หมายถึง อยู่ในบรรทัดเดียวกันแต่ตั้งค่าความกว้าง สูง padding margin ได้เหมือน block

ตัวอย่างที่ 1: แสดงวันที่ในบรรทัดเดียวกับข้อความ

<!DOCTYPE html> <html> <head> <style> p {    background-color: orange;    color: white; } p.demo {    display: inline-block; } </style> </head> <body> <h1>Student Result</h1> <div> The result of MCA student will be declared on <p class="demo">20th Decemeber 2019</p>. Check the website on the same day at 8PM. </div> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: ผสม display: none และ inline-block

<!DOCTYPE html> <html> <head> <style> p {    background-color: orange;    color: white; } p.demo1 {    display: none; } p.demo2 {    display: inline-block; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo1">9AM</p> 10AM on 20th December. </div> <div> Match will end at <p class="demo2">5PM</p> on 20th December. </div> </body> </html>

ผลลัพธ์

ความแตกต่าง display ต่างๆ

กรณีใช้งานยอดนิยม: สร้างเมนูนำทาง (navigation), ปุ่ม, การ์ดสินค้า, ฟอร์ม