Trần Ngọc Thanh - 651
- 11/07/2025
Trần Ngọc Thanh Thuộc tính display trong CSS dùng để quy định cách hiển thị của một phần tử HTML hoặc các phần tử HTML con nằm trong phần tử HTML cha, 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
Chức năng của Thuộc tính display trong CSS
Thuộc tính display trong CSS dùng để quy định cách hiển thị của một phần tử HTML hoặc các phần tử HTML con nằm trong phần tử HTML cha.
Các giá trị của Thuộc tính display trong CSS
block: Phần tử HTML có giá trị display:block sẽ chiếm hết một hàng
none: Phần tử HTML có giá trị display:none sẽ bị ẩn đi.
inline: Phần tử HTML có giá trị display:inline 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.
inline-block: Phần tử HTML có giá trị display:inline-block 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.
grid: Các phần tử con nằm trong phần tử HTML cha có giá trị display:grid đều có chiều rộng full 100%.
Code Thuộc tính display trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính display trong CSS</title>
<style>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height: auto; padding:5px; background:#ddd; border: 1px solid red; margin-bottom: 10px}
span{color:#fff; background:green}
</style>
</head>
<body>
<h1>Code Thuộc tính display trong CSS</h1>
<div>
<h3>display:block;</h3>
<p>Phần tử HTML có giá trị <span style="display:block;" >display:block;</span> sẽ chiếm hết một hàng</p>
</div>
<div>
<h3>display:none;</h3>
<p>Phần tử HTML có giá trị <span style="display:none;" >display:none;</span> sẽ bị ẩn đi</p>
</div>
<div>
<h3>display:inline;</h3>
<p>Phần tử HTML có giá trị <span style="display:inline;" >display:inline;</span> 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</p>
</div>
<div>
<h3>display:inline-block;</h3>
<p>Phần tử HTML có giá trị <span style="display:inline-block; width:100px; height:50px" >display:inline-block;</span> 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</p>
</div>
<div>
<h3>display:grid;</h3>
<p style="display:grid;">Các phần tử con nằm trong phần tử HTML cha có giá trị <span>display:grid;</span> đều có chiều rộng full <span>100%</span>.</p>
</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 *
