display trong CSS

Đặc tính display là đặc tính CSS quan trọng nhất để kiểm soát layout cho trang web.

Đặc tính display

Đặc tính display cho biết một phần tử có hiển thị hay không và hiển thị như thế nào. Mỗi phần tử HTML đều có giá trị hiển thị mặc định phụ thuộc vào kiểu phần tử. Giá trị mặc định cho hầu hết các phần tử là khối hoặc nội dòng.

Phần tử khối

Phần tử khối luôn bắt đầu bằng dòng mới và chiếm toàn bộ độ rộng có thể. Ví dụ về phần tử khối

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Phần tử nội dòng

Phần tử nội dòng không bắt đầu trên dòng mới và chỉ chiếm độ rộng cần thiết. Ví dụ về phần tử nội dòng:

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

Display: none;

display: none; thường được dùng với JavaScript để ẩn / hiện phần tử mà không xóa / tạo lại chúng. Phần tử <script> mặc định dùng display: none;

Ghi đè giá trị hiển thị mặc định

Như đã nói mỗi phần tử có giá trị hiển thị mặc định, nhưng bạn có thể ghi đè. Đổi từ phần tử nội dòng sang phần tử khối và ngược lại có thể giúp trang có diện mạo khác mà vẫn tuân theo chuẩn. Một ví dụ phổ biến là dùng phần tử nội dòng <li> cho menu theo chiều ngang.

li {
 display: inline;
}

Lưu ý: thay đổi đặc tính hiển thị của phần tử chỉ thay đổi cách phần tử đó hiển thị chứ không thay đổi bản chất của nó. Phần tử nội dòng với display: block; không thể có phần tử khối khác bên trong nó.

Ví dụ dưới đây hiển thị phần tử <span> như một phần tử khối.

span {
 display: block;
}

Ví dụ dưới đây hiển thị phần tử <a> như một phần tử khối.

a {
 display: block;
}

Ẩn một phần tử, dùng display: none hay visibility: hidden?

Ẩn một phần tử có thể đặt giá trị none cho đặc tính display, khi đó, trang sẽ hiển thị như thể phần tử không có ở đó.

h1.hidden {
 display: none;
}

visibility: hidden; cũng ẩn phần tử nhưng nó sẽ chiếm một không gian như khi nó có hiển thị. Dù bị ẩn, nó vẫn ảnh hưởng tới layout.

h1.hidden {
 visibility: hidden;
}

Bài trước: Bảng trong CSS

Bài sau: Độ rộng tối đa của phần tử