การใช้บล็อกค่าคุณสมบัติการแสดงผลทำให้องค์ประกอบเริ่มต้นในบรรทัดใหม่ ด้วยเหตุนี้จึงใช้ความกว้างทั้งหมด ดังนั้นองค์ประกอบจะแสดงเป็นองค์ประกอบบล็อก
ตัวอย่าง
ให้เรามาดูตัวอย่างการใช้บล็อกการแสดงผลใน CSS -
<!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } p.demo1 { display: block; } p.demo2 { display: inline-block; } </style> </head> <body> <h1>Match Details</h1> <div> Match will begin at <p class="demo1">10AM</p> on 19th Decemenber, 2019. </div> <hr /> <div> Match will end at <p class="demo2">5PM</p> on 19th Decemenber, 2019. </div> </body> </html>
ผลลัพธ์
เรามาดูตัวอย่างอื่นกัน −
<!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } p.demo { display: 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>
ผลลัพธ์