Thuộc tính display trong CSS
Trần Thị Vân - 1603
- 11/07/2025
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>
Những lỗi thường gặp khi sử dụng display trong CSS
Thuộc tính display có thể làm thay đổi cách một phần tử tham gia vào bố cục trang. Vì vậy, khi thiết lập không phù hợp, phần tử có thể biến mất, kích thước thay đổi hoặc vị trí không giống như mong đợi.
Phần tử không hiển thị dù đã thiết lập display
Nếu phần tử hoàn toàn biến mất, trước tiên cần kiểm tra giá trị display đang được áp dụng. Chẳng hạn, display: none sẽ loại phần tử khỏi bố cục, khiến cả nội dung và không gian của phần tử không còn xuất hiện trên trang.
.menu {
display: none;
}
Ngoài ra, cần kiểm tra xem có quy tắc CSS khác ghi đè lên khai báo hiện tại hay không. Công cụ Inspect trên trình duyệt giúp xác định chính xác quy tắc nào đang tác động đến phần tử.
Khoảng cách và kích thước thay đổi khi đổi display
Việc chuyển đổi giữa các kiểu hiển thị có thể làm thay đổi cách phần tử nhận width, height, margin và padding. Ví dụ, một phần tử chuyển từ kiểu inline sang block có thể chiếm toàn bộ chiều ngang khả dụng và bắt đầu trên một dòng mới.
.title {
display: block;
width: 300px;
padding: 10px;
}
Nếu kích thước thay đổi ngoài dự kiến, không nên chỉ điều chỉnh width hoặc height. Hãy kiểm tra lại kiểu hiển thị và cách phần tử đang tương tác với các phần tử xung quanh.
display không hoạt động như mong muốn trong bố cục
Một lỗi phổ biến là thay đổi display của phần tử con nhưng lại bỏ qua cấu trúc của phần tử cha. Chẳng hạn, khi muốn sắp xếp nhiều phần tử trên cùng một hàng, việc đặt kiểu hiển thị phù hợp cho phần tử cha thường quan trọng hơn việc chỉnh từng phần tử con.
.container {
display: flex;
}
.item {
display: block;
}
Trong trường hợp này, display: flex trên phần tử cha quyết định cách các phần tử con được bố trí. Vì vậy, khi xử lý lỗi giao diện, nên kiểm tra lần lượt phần tử cha, phần tử con và các quy tắc CSS đang tác động lên chúng.
Cách kiểm tra và khắc phục lỗi display trong CSS
Khi display cho kết quả khác dự kiến, hãy kiểm tra theo từng bước thay vì sửa nhiều thuộc tính cùng lúc. Trước hết, xác định giá trị display thực tế của phần tử, sau đó kiểm tra các quy tắc bị ghi đè và cấu trúc phần tử cha.
- Kiểm tra giá trị display đang được áp dụng.
- Xem phần tử có bị quy tắc CSS khác ghi đè hay không.
- Kiểm tra display của phần tử cha và các phần tử liên quan.
- Kiểm tra width, height, margin, padding nếu kích thước bị thay đổi.
- Dùng công cụ dành cho nhà phát triển của trình duyệt để xác định nguyên nhân trước khi chỉnh sửa CSS.
Cách kiểm tra theo trình tự giúp tìm đúng nguyên nhân và hạn chế việc thêm CSS dư thừa. Đặc biệt, không nên dùng !important ngay khi gặp lỗi display, vì điều này có thể che khuất nguyên nhân thực sự và khiến việc bảo trì giao diện khó hơn.
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 *
