Cách dùng thuộc tính display trong CSS

Thuộc tính display trong css quy định cách hiển thị của một thẻ trong tương quan với các thẻ, đối tượng khác xung quanh, có 3 cách hiển thị chính:

  • inline: nghĩa là hiển thị trên cùng một dòng, chúng ta có thể kể tên các thẻ trong HTML là inline, bao gồm: thẻ b, thẻ i, thẻ a, thẻ span
  • block: hiển thị theo khối tách riêng nhau. Một số thẻ HTML là block như thẻ h1 đến h6, thẻ p, thẻ div
  • none: không hiển thị thẻ đó. Đoạn code của nó trong HTML mặc dù vẫn còn nhưng về mặt hiển thị là giống với việc đoạn code đó đã bị xóa đi, vị trí trong luồng trang cũng mất.

Nếu muốn bạn có thể dễ dàng chuyển một thẻ từ kiểu inline sang block và ngược lại, ví dụ:

Dòng này có 2 thẻ inline gồm thẻ a và thẻ span, bạn có thể thấy chúng đang trên cùng một dòng.


Dòng dưới đây cũng bao gồm 2 thẻ inline như trên nhưng vì tôi chuyển nó thành block nên kết quả sẽ như thế này:

Freehost Page chuyên về HTML và CSS ngoài ra là các thủ thuật Blog khác.


Vậy là thay vì hiển thị trên cùng dòng, chúng đã bị ngắt ra thành các khối khác nhau.

Code mẫu:

a, span {
    display: block;
}

Tiếp theo chúng ta sẽ thực hành xem giá trị none sẽ làm thẻ biến mất đi như thế nào, chẳng hạn ta có 3 div theo thứ tự như sau:

Đây là hộp thứ nhất
Đây là hộp thứ hai
Đây là hộp thứ ba

Giờ nếu tôi để giá trị display: none; cho hộp thứ hai (cụ thể là thẻ div) thì kết quả của nó sẽ như thế này:

Đây là hộp thứ nhất
Đây là hộp thứ hai
Đây là hộp thứ ba

Như bạn đã thấy, hộp thứ hai đã biến mất, và hộp thứ ba được đẩy lên thế chỗ như là chưa từng có hộp thứ hai vậy.

Chúng ta làm ví dụ khác, lần này tôi sẽ làm biến mất chữ.

Giả dụ tôi sẽ làm biến mất đoạn màu xanh này, trong khi vẫn giữ đoạn màu đỏ này.

Kết quả:

Giả dụ tôi sẽ làm biến mất đoạn màu xanh này, trong khi vẫn giữ đoạn màu đỏ này.

Code mẫu:

Giả dụ tôi sẽ làm biến mất đoạn <span style="color: blue; display: none;">màu xanh này</span>, trong khi vẫn giữ đoạn <span style="color: red;">màu đỏ này</span>

Có bạn hỏi tôi, nếu dùng visibility: hidden; cũng làm thẻ biến mất như là display: none; Vậy thì chúng giống và khác nhau như thế nào?

Tôi sẽ trả lời bằng ví dụ minh họa, vẫn dòng trên nhưng dùng visibility: hidden; sẽ cho cách hiển thị như này:

Giả dụ tôi sẽ làm biến mất đoạn màu xanh này, trong khi vẫn giữ đoạn màu đỏ này

Bạn đã thấy sự khác biệt?

Vâng, tôi nghĩ là bạn đã thấy, nếu dùng visibility: hidden; thẻ biến mất nhưng vị trí của nó vẫn còn, tức là nó để lại khoảng trống (cho người ở lại!) nhưng display: none; thì biến mất đồng thời cả vị trí cũng mất luôn.

Về mặt ứng dụng thực tế, thuộc tính display hay được dùng làm menu xổ, các hiệu ứng ẩn hiện khá đẹp mắt…

Chia sẻ bài này: