Thuộc tính display trong CSS

Thuộc tính display trong CSS

Thuộc tính display xác định loại hiển thị của thành phần.

Cấu trúc

tag {
    display: giá trị;
}

Với giá trị như sau:

Thuộc tínhgiá trịVí dụMô tả
displayblockdisplay: block;Thành phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó.
inlinedisplay: inline;Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng), đây là dạng mặc định.
inline-blockdisplay: 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-tabledisplay: inline-table;Thành phần sẽ hiển thị như một khối nội tuyến, đối xử tương tự <table>, không ngắt dòng trước và sau thành phần.
list-itemdisplay: list-item;Thành phần sẽ hiển thị như một khối và một nội tuyến cho các điểm đánh dấu danh sách.
nonedisplay: none;Thành phần không hiển thị.
run-indisplay: run-in;Thành phần sẽ hiển thị như một khối hoặc một nội tuyến, tùy thuộc vào bối cảnh.
tabledisplay: table;Thành phần sẽ đối xử như một table, ngắt dòng trước và sau thành phần.
table-captiondisplay: table-caption;Thành phần sẽ đối xử như một <caption> của table.
table-celldisplay: table-cell;Thành phần sẽ đối xử như một ô trong table.
table-columndisplay: table-column;Thành phần sẽ đối xử như một cột trong table.
table-column-groupdisplay: table-column-group;Thành phần sẽ đối xử như một nhóm cột (<colgroup>) trong table.
table-footer-groupdisplay: table-footer-group;Thành phần sẽ đối xử như một nhóm footer (<tfoot>) trong table.
table-header-groupdisplay: table-header-group;Thành phần sẽ đối xử như một nhóm header (<thead>) trong table.
table-rowdisplay: table-row;Thành phần sẽ đối xử như một hàng trong table.
table-row-groupdisplay: table-row-group;Thành phần sẽ đối xử như một nhóm hàng trong table.
inheritdisplay: inherit;Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>HỌC TV : </p>
<p>Kiến thức nhỏ cho web hiện đại</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Kiến thức nhỏ cho web hiện đại

CSS viết:

p {
    display: inline;
}

Hiển thị trình duyệt khi có CSS:

HỌC TV : Kiến thức nhỏ cho web hiện đại


Trình duyệt hỗ trợ

Thuộc tính display được hỗ trợ trong đa số các trình duyệt. Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

Bình luận