Hiện ẩn phần tử HTML bằng thuộc tính Display trong CSS

Thuộc tính display dùng để chỉ định phần tử sẽ được hiển thị như thế nào

(Ví dụ: ẩn phần tử, hiện phần tử, ép phần tử sang kiểu khối, ép phần tử sang kiểu nội tuyến,....)

Kiểu phần tử khối (Block Element)

Một phần tử khối luôn được bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (trải dài từ bên trái qua bên phải xa hết mức có thể)

Dưới đây là một số thẻ có kiểu phần tử khối (block):

• <div>
• <h1> - <h6>
• <p>
• <form>

Kiểu phần tử nội tuyến (Inline Element)

Một phần tử nội tuyến KHÔNG bắt đầu trên một dòng mới.

Ví dụ: đây là một phần tử nội tuyến nằm trên cùng một dòng của phần tử tồn tại trước đó (nếu phần tử đó cũng thuộc kiểu nội tuyến).

Dưới đây là một số thẻ có kiểu phần tử nội tuyến (inline):

• <span>
• <a>
• <img>

Cách sử dụng thuộc tính display để hiện (ẩn) phần tử HTML

Để sử dụng thuộc tính display, chúng ta sử dụng cú pháp

Trong đó:

• inline – ép phần tử sang kiểu nội tuyến
• block – ép phần tử sang kiểu khối
• none - ẩn phần tử
• inherit - kế thừa kiểu của phần tử cha

Cách sử dụng thuộc tính visibility để hiện (ẩn) phẩn tử HTML

Để ẩn phẩn tử thì sử dụng display:none. Ngoài ra chúng ta cũng có thể sử dụng visibility:hidden

Tuy nhiên, hai phương thức trên sẽ cho ra hai kết quả khác nhau:

• display:none thì ẩn nguyên cái phần tử HTML.
• visibility:hidden chỉ ẩn nội dung của phần tử HTML, nhưng vẫn sẽ hiện thị khoảng trắng ở vị trí của phần tử đó.