Thuộc tính display được dùng để chỉ rõ cách phát sinh ra hình hộp cho phần tử trong trang HTML.
Như đã biết mọi phần tử trên trang HTML đều có dạng hình chữ nhật (xem mô hình hộp chữ nhật phần tử trong CSS). Kiểu hình hộp sẽ ảnh hưởng tới định dạng của nó trên trang.
Có hai cách định dạng chỉnh cho hình chữ nhật phần tử là: inline và block (xem thêm Phần tử HTML Inline và Block)
Định dạng Inline
Định dạng inline (phần tử cấp độ inline), thì hộp phần tử đi theo luồng của dòng, nó không tạo ra ngắt dòng. Những phần tử mặc định box của nó định dạng ban đầu là inline như: <strong>, <i>, <span>, <em>, <img> ... Các phần tử này như là một phần của dòng.
Để thiết lập phần tử về dạng inline bằng cú pháp CSS
display: inline;
<style>
.inline_example {
background-color: yellow;
}
.pexam {
border: 1px solid gray;
}
</style>
<p class="pexam">Đây là đoạn văn trong
<strong class="inline_example">paragraph</strong>,
ví dụ có chứa strong là inline.
</p>
Đây là đoạn văn trong paragraph, ví dụ có chứa strong là inline.
Phần tử định dạng inline có thể thiết lập có padding, margin nhưng không thiết lập được width và height (dù có thiết lập thì cũng không tác dụng gì). Cũng chú ý, padding và margin nếu thiết lập nó sẽ đẩy các phần tử khác giãn ra theo chiều ngang và không tác dụng đẩy các phần tử theo chiều đứng.
Định dạng inline-block
Định dạng một phần tử giống dạng inline, tuy nhiên cho phép thiết lập chiều rộng và cao phần content, nó đẩy giãn các phần tử ngang, dọc phù hợp với kích thước của nó: Đó là phần tử dạng inline-block. Cú pháp:
display: inline-block;
<style>
.inline_example1 {
display: inline-block;
background-color: yellow;
height: 50px;
width: 150px;
text-align: center;
}
.pexam {
border: 1px solid gray;
}
</style>
<p class="pexam">Đây là đoạn văn trong
<strong class="inline_example1">paragraph</strong>,
ví dụ có chứa strong là inline-block.
</p>
Đây là đoạn văn trong paragraph, ví dụ có chứa strong là inline-block.
Định dạng block
Cú pháp CSS:
display: block;
Phần tử định dạng cấp độ block là những phần tử không đứng cùng hàng với phần tử khác, nó ngắt dòng để tạo dòng mới và chiều ngang mở rộng tối đa có thể (tối đa theo kích thước phần tử chứa). Phần tử block có thể thiết lập chiều rộng, cao cho nó. Hãy chú ý nguyên tắc: phần tử block có thể chứa phần tử block khác, chứa phần tử inline, block-inline. Còn phần tử inline thì không nên chứa block (có một số ngoại lệ như phần tử <a>). Phần tử mặc định đã là block như: <p> <ul> <h1> ...
Ẩn phần tử - display: none
Cú pháp CSS:
display: none;
Phần tử sẽ bị ẩn đi, bị loại bỏ hoàn toàn khỏi hiện thị của trang, trình duyệt không dựng nội dung phần tử - mà sẽ có nó như không có. Thuộc tính này hữu ích khi sử dụng với Javascript hoặc viết CSS responsive (ẩn/hiện tùy thuộc vào kích cỡ màn hình).
Ẩn phần tử - display: list-item
Cú pháp CSS:
display: list-item;
Cho biết sẽ tạo ra phần tử dạng danh sách (tương tự phần tử <li> trong HTML).
<style>
.item-exam {
display: list-item;
}
.list-exam {
list-style: lower-alpha;
padding-left: 50px;
}
</style>
<p class="list-exam">
<span class="item-exam">Phần tử 1</span>
<span class="item-exam">Phần tử 2</span>
<span class="item-exam">Phần tử 3</span>
</p>
Phần tử 1 Phần tử 2 Phần tử 3
Thuộc tính display còn nhận các giá trị khác, sẽ được trình bày ở các mục riêng như: flex, inline-flex để bố cục trang, grid và inline-grid để tạo lưới bố cục ...
