Thuộc tính display trong CSS là một công cụ mạnh mẽ giúp bạn kiểm soát cách các phần tử HTML hiển thị trên trang web. Nó quyết định liệu một phần tử sẽ chiếm toàn bộ chiều rộng, hiển thị trên cùng một dòng với các phần tử khác hay thậm chí bị ẩn hoàn toàn. Bài viết này sẽ cung cấp một cái nhìn toàn diện về thuộc tính display, tập trung vào các giá trị quan trọng và phổ biến nhất mà bạn sẽ thường xuyên sử dụng trong quá trình phát triển web.
Mục Lục
Display Block
Giá trị block làm cho phần tử chiếm toàn bộ chiều rộng có sẵn, tạo ra một “khối” và đẩy các phần tử khác xuống dòng mới. Các phần tử block luôn bắt đầu trên một dòng mới và có thể có chiều rộng và chiều cao được chỉ định.
Cú pháp:
selector {
display: block;
}Ví dụ:
Thông thường, thẻ span là một phần tử inline, có nghĩa là nó chỉ chiếm không gian cần thiết cho nội dung của nó. Tuy nhiên, khi bạn đặt display: block cho thẻ span, nó sẽ hoạt động như một thẻ div hoặc p, chiếm toàn bộ chiều rộng và đẩy các phần tử khác xuống dòng.
<span>Đây là một đoạn text.</span>span {
display: block;
background-color: #f0f0f0;
padding: 10px;
}Kết quả là đoạn text sẽ hiển thị trên một dòng riêng biệt, với nền màu xám và khoảng đệm xung quanh.
Display Inline
Giá trị inline làm cho phần tử hiển thị trên cùng một dòng với các phần tử khác, chỉ chiếm không gian cần thiết cho nội dung của nó. Các phần tử inline không bắt đầu trên một dòng mới và không thể có chiều rộng hoặc chiều cao được chỉ định. Đây là giá trị mặc định cho các thẻ như a, span, em, và strong.
Cú pháp:
selector {
display: inline;
}Ví dụ:
Thông thường, thẻ p là một phần tử block. Bạn có thể thay đổi nó thành một phần tử inline bằng cách sử dụng display: inline;.
<p>Đây là đoạn văn bản thứ nhất.</p>
<p>Đây là đoạn văn bản thứ hai.</p>p {
display: inline;
background-color: #e0e0e0;
padding: 5px;
}Kết quả là cả hai đoạn văn bản sẽ hiển thị trên cùng một dòng, với nền màu xám nhạt và khoảng đệm xung quanh.
Display Inline-Block
Giá trị inline-block kết hợp các đặc điểm của cả inline và block. Nó cho phép phần tử hiển thị trên cùng một dòng với các phần tử khác, nhưng vẫn cho phép bạn chỉ định chiều rộng và chiều cao.
Cú pháp:
selector {
display: inline-block;
}Ví dụ:
<p>Đoạn văn bản 1</p>
<p>Đoạn văn bản 2</p>p {
display: inline-block;
width: 150px;
height: 50px;
background-color: orange;
text-align: center;
line-height: 50px; /* Căn giữa theo chiều dọc */
}Trong ví dụ này, các thẻ p sẽ hiển thị trên cùng một dòng, mỗi thẻ có chiều rộng 150px và chiều cao 50px với nền màu cam.
Display None
Giá trị none ẩn hoàn toàn phần tử khỏi trang web. Phần tử sẽ không chiếm bất kỳ không gian nào và sẽ không hiển thị.
Cú pháp:
selector {
display: none;
}Ví dụ:
<p id="an-di">Đoạn văn bản này sẽ bị ẩn.</p>#an-di {
display: none;
}Đoạn văn bản với ID “an-di” sẽ không hiển thị trên trang web.
Display Table
Giá trị table cho phép bạn định dạng một phần tử như một bảng HTML. Nó thường được sử dụng kết hợp với các giá trị khác như table-row, table-cell, v.v. để tạo bố cục phức tạp. Tuy nhiên, cách tiếp cận này ít được khuyến khích hơn so với sử dụng Flexbox hoặc Grid Layout.
Cú pháp:
selector {
display: table;
}Ví dụ:
<div class="bang">
<div class="hang">
<div class="o">Ô 1</div>
<div class="o">Ô 2</div>
</div>
<div class="hang">
<div class="o">Ô 3</div>
<div class="o">Ô 4</div>
</div>
</div>.bang {
display: table;
width: 100%;
}
.hang {
display: table-row;
}
.o {
display: table-cell;
border: 1px solid black;
padding: 5px;
}Đoạn mã này sẽ tạo ra một bảng đơn giản với hai hàng và hai cột.
Display Inherit
Giá trị inherit cho phép một phần tử kế thừa giá trị display từ phần tử cha của nó.
Cú pháp:
selector {
display: inherit;
}Ví dụ:
Nếu một phần tử div có display: block; và bạn đặt display: inherit; cho một phần tử con bên trong div đó, phần tử con cũng sẽ có display: block;.
Các Giá Trị Khác
Ngoài các giá trị trên, thuộc tính display còn hỗ trợ một số giá trị khác như:
table-caption: Xác định phần tử như thẻ<caption>trong bảng.table-column: Xác định phần tử như thẻ<col>trong bảng.table-row: Xác định phần tử như thẻ<tr>trong bảng.table-column-group: Xác định phần tử như thẻ<colgroup>trong bảng.list-item: Xác định thành phần sẽ được hiển thị như một thẻ<li>.
Tuy nhiên, những giá trị này ít được sử dụng hơn trong thực tế so với block, inline, inline-block, và none.
Kết Luận
Thuộc tính display là một trong những thuộc tính CSS quan trọng nhất để kiểm soát bố cục trang web. Bằng cách hiểu rõ các giá trị khác nhau của nó, bạn có thể tạo ra các bố cục linh hoạt và đáp ứng, phù hợp với mọi loại thiết bị. Hãy tập trung vào việc nắm vững các giá trị block, inline, inline-block, và none, vì chúng là những giá trị phổ biến và hữu ích nhất trong quá trình phát triển web.