Ngọc Thanh - 30
- 11/07/2025
Ngọc Thanh 
Thuộc tính display trong CSS là một loại thuộc tính trong CSS dùng để quy định cách hiển thị của các phần tử HTML, phần tử có thể ẩn, hiện, hiển thị trên một hàng,... , chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính display trong CSS
Thuộc tính display trong CSS là gì?
Thuộc tính display trong CSS là một loại thuộc tính trong CSS dùng để quy định cách hiển thị của các phần tử HTML, phần tử có thể ẩn, hiện, hiển thị trên một hàng,... tùy vào quy định css của bạn.
Ví dụ thực tế về Thuộc tính display trong CSS
CSS Display: block
Khi đặt display bằng block thì thẻ HTML đó sẽ được hiển thị và chiếm toàn bộ chiều rộng.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử CSS Display block</title>
<style>
#disblo{display:block}
</style>
</head>
<body>
<div id="disblo">Chạy thử CSS Display block</div>
</body>
</html>
CSS Display: none
Thẻ html đặt css display bằng none thì thẻ đó sẽ bị ẩn đi và không hiện ra cho người dùng thấy.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử CSS Display none</title>
<style>
#disnone{display:none}
</style>
</head>
<body>
<div id="disnone">Chạy thử CSS Display none</div>
</body>
</html>
CSS Display: inline
Phần tử HTML được css display bằng inline thì sẽ được hiển thị cùng trên một dòng với các chữ khác trong một câu, bản thân nó sẽ không được quy định chiều rộng và chiều cao.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử CSS Display inline</title>
<style>
#disinline p{display:inline;width:100px;height:100px;background:red}
</style>
</head>
<body>
<div id="disinline">Chạy thử CSS <p><span >d</span> Display inline</p></div>
</body>
</html>
CSS Display: inline-block
Phần tử HTML được css display bằng inline-block thì sẽ được hiển thị cùng trên một dòng với các chữ khác trong một câu, bản thân nó sẽ được quy định chiều rộng và chiều cao.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử CSS Display inline-block</title>
<style>
#disinlinebl p{display:inline-block;width:100px;height:100px;background:red}
</style>
</head>
<body>
<h1>Chạy thử CSS Display inline-block</h1>
<div id="disinlinebl">Chạy thử CSS <p><span >d</span> Display inline-block</p></div>
</body>
</html>
CSS Display: grid
Các thẻ HTML nằm trong display:grid sẽ có chiều rộng full 100%.
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử CSS Display grid</title>
<style>
#disgrid{display:grid;width:100%;height:auto;background:red;float:left}
</style>
</head>
<body>
<h1>Chạy thử CSS Display grid</h1>
<div id="disgrid"><span>Chạy thử CSS</span><span >d</span> <span>Display grid</span>
</div>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính display trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
