Sử dụng khối giá trị thuộc tính hiển thị làm cho một phần tử bắt đầu trên một dòng mới. Cùng với đó, nó chiếm toàn bộ chiều rộng. Do đó, phần tử được hiển thị dưới dạng phần tử khối.
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ để triển khai khối hiển thị 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> Đầu ra
Bây giờ chúng ta hãy xem một 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> Đầu ra
