Thuộc tính display trong CSS
Trần Thị Vân - 1560
- 11/07/2025
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:
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ú pháp của Thuộc tính display trong CSS
display: giatri;
giatri: Giá trị để quy định cách hiển thị của phần tử HTML (Ví dụ: block, none, inline, inline-block, grid, flex, ...)
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%.
flex: Các phần tử con nằm trong phần tử HTML cha có giá trị display:flex; đều nằm trên cùng một dòng, chiều cao của nó full theo phần tử cha nếu không quy định chiều cao, giá trị này thường kết hợp với thuộc tính khác để định dạng thêm.
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>
<p>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:</p>
<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>
<div>
<h3>display:flex;</h3>
<p style="display:flex;">Các phần tử con nằm trong phần tử HTML cha có giá trị <span>display:flex;</span> đều nằm trên cùng một dòng, chiều cao của nó full theo phần tử cha nếu không quy định chiều cao, giá trị này thường kết hợp với thuộc tính khác để định dạng thêm.</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 *
