Thuộc tính display trong CSS

Định nghĩa và cách sử dụng

Thuộc tính display quy định loại khung mà element nên tạo ra.

Giải thích

Thuộc tính này được sử dụng để định nghĩa loại khung hiển thị mà element tạo ra khi xây dựng bố cục. Đối với các loại tài liệu như HTML, nếu sử dụng display không cẩn thận sẽ rất nguy hiểm vì có thể vi phạm cấu trúc hiển thị đã được định nghĩa trong HTML. Đối với XML, do XML không có cấu trúc này, tất cả display là bắt buộc.

Chú thích:Trong CSS2 có giá trị compact và marker, nhưng do thiếu hỗ trợ rộng rãi, đã bị xóa khỏi CSS2.1.

Xin xem thêm:

Giáo trình CSS:Định vị CSS

Tài liệu tham khảo HTML DOM:Thuộc tính display

Mô hình

Làm cho đoạn văn có khung inline:

p.inline
  {
  display:inline;
  }

Thử ngay

Ngữ pháp CSS

display: value;

Giá trị thuộc tính

Giá trị Mô tả
none Element này sẽ không được hiển thị.
block Element này sẽ được hiển thị dưới dạng element block, trước sau element sẽ có ký tự ngắt dòng.
inline Mặc định. Element này sẽ được hiển thị dưới dạng element inline, không có ký tự ngắt dòng trước sau element.
inline-block Element trong dòng (Element block-inline được thêm vào CSS2.1).
list-item Element này sẽ hiển thị dưới dạng danh sách.
run-in Element này sẽ hiển thị dưới dạng element block hoặc inline dựa trên ngữ cảnh.
compact Trong CSS có giá trị compact, nhưng do thiếu hỗ trợ rộng rãi, đã bị xóa khỏi CSS2.1.
marker Trong CSS có giá trị marker, nhưng do thiếu hỗ trợ rộng rãi, đã bị loại bỏ từ CSS2.1.
table Element này sẽ được hiển thị như một bảng khối (giống <table>), có ký tự ngắt hàng trước sau bảng.
inline-table Element này sẽ được hiển thị như một bảng nội tuyến (giống <table>), không có ký tự ngắt hàng trước sau bảng.
table-row-group Element này sẽ được hiển thị như một nhóm các hàng (giống <tbody>)
table-header-group Element này sẽ được hiển thị như một nhóm các hàng (giống <thead>)
table-footer-group Element này sẽ được hiển thị như một nhóm các hàng (giống <tfoot>)
table-row Element này sẽ được hiển thị như một hàng bảng (giống <tr>)
table-column-group Element này sẽ được hiển thị như một nhóm các cột (giống <colgroup>)
table-column Element này sẽ được hiển thị như một cột ô (giống <col>)
table-cell Element này sẽ được hiển thị như một ô bảng (giống <td> và <th>)
table-caption Element này sẽ được hiển thị như một tiêu đề bảng (giống <caption>)
inherit Cần quy định rằng giá trị thuộc tính display của phần tử nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: inline
Di truyền: no
Phiên bản: CSS1
Ngôn ngữ lập trình JavaScript: object.style.display="inline"

Ví dụ TIY

Cách hiển thị phần tử như một phần tử nội tuyến
Ví dụ này minh họa cách hiển thị phần tử như một phần tử nội tuyến.
Cách hiển thị phần tử như một phần tử khối
Ví dụ này minh họa cách hiển thị phần tử như một phần tử khối.

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Chú thích:Nếu đã quy định !DOCTYPE, thì Internet Explorer 8 (và các phiên bản cao hơn) hỗ trợ giá trị thuộc tính "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" và "inherit".