Bố cục trong CSS – Thuộc tính display

Thuộc tính display là một trong những thuộc tính quan trọng để định dạng bố cục trong CSS.

Thuộc tính display

Thuộc tính display xác định cách các phần tử được hiển thị. Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặc inline.

Các phần tử Block-level

Một phần tử block-level 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 (trải dài ra bên trái và phải càng nhiều càng tốt).

Ví dụ về phần tử block-level:

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

Các phần tử inline

Một phần tử inline không bắt đầu trên một dòng mới và chỉ chiếm chiều rộng đủ để hiển thị.

Ví dụ về phẩn tử inline:

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

Display: none;

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

Ghi đề giá trị display mặc định

Như đã nói ở trên, mỗi phần tử đều có giá trị hiển thị mặc định. Tuy nhiên bạn có thể ghi đè lên giá trị đó. Thay phần tử inline bằng phần tử block hoặc ngược lại. Điều này có thể hữu dụng để hiển thị trang web được thuận mắt hơn mà vẫn đảm bảo đáp ứng tiêu chuẩn.

Ví dụ phổ biến là tùy biến phần tử <li> theo thanh menu ngang:

li {
    display: inline;
}

Lưu ý: thiết lập thuộc tính display của phần tử chỉ thay đổi cách mà phần tử đó được hiển thị, không thay đổi loại phần tử đó. Vì thế phần tử inline với display:block; không cho phép phần tử block khác nằm trong nó.

Xem ví dụ dưới đây hiển thị phần tử <span> như phần tử block:

span {
    display: block;
}

Ẩn một phần tử – display:none hay visibility:hidden

Ẩn một phần tử có thể làm bằng cách thiết lập thuộc tính display thành giá trị none. Phần tử có thể bị ẩn đi và trang web sẽ không hiển thị phần tử đó:

h1.hidden {
    display: none;
}

visibility:hidden; cũng ẩn một phần tử. Tuy nhiên phần tử sẽ vẫn tạo một khoảng trắng ở đó. Phần tử ẩn đi nhưng bố cục hiển thị khoảng trắng ở đó.

h1.hidden {
    visibility: hidden;
}

Thuộc tính Display/Visibility trong CSS