Cú Pháp

-Thuộc tính này có tác dụng, chỉ định cách hiển thị của thành phần.

Cú Pháp:

display: value;

Trong đó,value là một trong các giá trị sau:

• inline - Thành phần sẽ hiển thị như một nội tuyến (giống như tag <span>). Đây là giá trị mặc định.
• block - Thành phần sẽ hiển thị như một khối (giống như tag <p>).
• flex - Thành phần sẽ hiển thị như một thùng chứa mềm dẻo.
• inline-block - Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến.
• inline-fex - Thành phần sẽ hiển thị như một thùng chứa mềm dẻo ngang.
• inline-table - Thành phần sẽ hiển thị như một khối nội tuyến.
• list-item - Thành phần sẽ hiển thị như thẻ <li>.
• run-in - Thành phần sẽ hiển thị như một khối hoặc nội tuyến, tùy thuộc vào ngữ cảnh.
• table - Thành phần sẽ hiển thị như một thẻ <table>.
• table-caption - Thành phần sẽ hiển thị như một thẻ <caption>.
• table-column-group - Thành phần sẽ hiển thị như một thẻ <colgroup>.
• table-header-group - Thành phần sẽ hiển thị như một thẻ <thead>.
• table-footer-group - Thành phần sẽ hiển thị như một thẻ <tfoot>.
• table-row-group - Thành phần sẽ hiển thị như một thẻ <tbody>.
• table-cell - Thành phần sẽ hiển thị như một thẻ <td>.
• table-column - Thành phần sẽ hiển thị như một thẻ <col>.
• table-row - Thành phần sẽ hiển thị như một thẻ <tr>.
• none - Thành phần sẽ không được hiển thị.

Ví Dụ

VD: Thay đổi cách hiển thị mặc định của thẻ <span>.

span{
    background-color: orange;
    padding: 10px;
    display: block;
    margin-top: 1px;
}

Xem Kết Quả

Tham Khảo

-Tham khảo thêm tại link.