DANH MỤC: Box

Thuộc tính display trong CSS


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.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

The best way to learn is to share

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia