Sử dụng giá trị display: block khiến phần tử bắt đầu trên dòng mới và chiếm toàn bộ chiều rộng. Do đó, phần tử hiển thị như một block element.
Ví dụ
Ví dụ dưới đây triển khai display block trong 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>
Kết quả
Ví dụ khác:
<!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>
Kết quả
