CSS Display

Thuộc tính display là thuộc tính quan trọng nhất trong CSS cho việc control layout.

Thuộc tính display xác định cách phần tử HTML hiển thị như thế nào. Mỗi phần tử HTML đều có giá trị display mặc định phụ thuộc vào chính phần tử đó. Giá trị display mặc định của đa số các phần tử là block hoặc inline.

Block Element

Một phần tử display: block; luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (kéo dài từ bên trái sang bên phải hết mức có thể). Một số phần tử HTML có display mặc định là block :

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

Inline Element

Một phần tử display: inline; không bắt đầu trên dòng mới và có độ rộng bằng với nội dung của nó. Một số thẻ HTML có display mặc định là inline :

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

Display none

Thuộc tính display: none; thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không xóa hoặc tạo lại chúng.

Thẻ <script> có thuộc tính mặc định là display: none;.

Ghi đè thuộc tính display

Như đã đề cập, Tất cả thẻ HTML đều có thuộc tính display mặc định. Tuy nhiên, Ta có thể ghi đè lại nó.

Thay đổi phần tử có display inline thành display block hoặc ngược lại, tùy theo cách mà bạn muốn để trang web bạn đẹp hơn.

Chú ý: Thiết lập thuộc tính display cho phần tử HTML chỉ thay đổi cách mà phần tử đó hiển thị, KHÔNG thay đổi loại của phần tử. Vì vậy, phần tử inline có css display: block; không cho phép phần tử block khác nằm bên trong nó.

Ví dụ bên dưới cho thẻ <span> hiển thị thành block :

<span>Ví dụ thẻ span có display "block" </span><span>chia thành 2 hàng khác nhau. </span>

span { display: block; }

Ví dụ thẻ span có display "block" chia thành 2 hàng khác nhau.

Hide element - display: none hay visibility:hidden

Ẩn một phần tử với thuộc tính display: none thì phần tử bị ấn đi và trang web load bình thường coi như không có phần tử đó. Xem ví dụ dưới đây:

<p>Đoạn text bình thường.</p> <p class="hide">Đoạn text bị ẩn đi.</p> <p>Đoạn text bình thường khác ở dưới.</p>

p.hide { display: none; }

Đoạn text bình thường.

Đoạn text bị ẩn đi.

Đoạn text bình thường khác ở dưới.

Thuộc tính visibility:hidden; cũng dùng để ẩn một phần tử. Tuy nhiên, phần tử này vẫn chiếm không gian tại vị trí nó nằm. Xem ví dụ bên dưới nhé :

<p>Đoạn text bình thường.</p> <p class="visibility">Đoạn text bị ẩn đi nhưng vẫn chiếm không gian.</p> <p>Đoạn text bình thường khác ở dưới. Bị trống 1 đoạn ở giữa do thẻ p ở trên bị ẩn bởi visibility và nó đang chiếm 1 khoảng trống.</p>

p.visibility { visibility: hidden; }

Đoạn text bình thường.

Đoạn text bị ẩn đi nhưng vẫn chiếm không gian.

Đoạn text bình thường khác ở dưới. Bị trống 1 đoạn ở giữa do thẻ p ở trên bị ẩn bởi visibility và nó đang chiếm 1 khoảng trống.

Bảng danh sách các giá trị của thuộc tính display: 

Cú pháp : display: value;