BASIC TO ADVANCE

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.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

2 Comments

Bài viết quá hay và bổ ích cho người mới học

Nguyên

3 năm trước

Cảm ơn bạn!

Vũ Thanh Tài

3 năm trước

Bình luận

Captcha