CSS Display

Display Property

Thuộc tính display chỉ cách mà một element được hiển thị.

Mọi element HTML đều có giá trị display mặc định tùy thuộc vào loại element đó. Giá trị hiển thị mặc định cho hầu hết các element là block hoặc inline.

Block Elements

Một element có 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 (trải dài sang trái và phải hết mức có thể).

Các element tiêu biểu:

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

Inline Elements

Một element có display inline không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết.

Đây là element <span> bên trong một paragraph.

Các element tiêu biểu:

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

Display: none;

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

Element <script> sử dụng display: none; như mặc định.

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

Như đã đề cập, mọi element đều có giá trị display mặc định. Tuy nhiên, bạn có thể ghi đè nó.

Thay đổi element inline thành element block hoặc ngược lại, có thể hữu ích để làm cho trang trông theo một cách cụ thể và vẫn tuân theo các tiêu chuẩn web.

Một ví dụ phổ biến là tạo các element <li> inline cho các menu ngang:

li {    display: inline;  }

 

Lưu ý: Việc đặt thuộc tính display của element chỉ thay đổi cách phần tử được hiển thị, KHÔNG phải loại element đó là gì. Vì vậy, một phần tử inline với display: block; không được phép có các element block khác bên trong nó.

Ví dụ sau đây hiển thị các element <span> dưới dạng các phần tử khối:

span {    display: block;  }

Ví dụ sau đây hiển thị các element <a> dưới dạng các phần tử khối:

a {    display: block;  }

 

Ẩn Element so sánh - display:none và visibility:hidden?

Việc ẩn một element có thể được thực hiện bằng cách đặt thuộc tính display: none;. Element sẽ bị ẩn và trang sẽ được hiển thị như thể element không có ở đó:

h1.hidden {    display: none;  }

visibility:hidden; cũng có thể ẩn element.

Tuy nhiên, element sẽ vẫn chiếm vị trí như trước. Element sẽ bị ẩn, nhưng vẫn ảnh hưởng đến bố cục:

h1.hidden {    visibility: hidden;  }