[CSS] – Thuộc tính Display

Display là một trong những thuộc tính quan trọng nhất của CSS, được dùng để xử lý layout (bố cục) trang.

Mỗi thẻ HTML đều có một giá trị Display mặc định, phụ thuộc vào loại thẻ. 2 giá trị display thường gặp nhất là block hoặc inline.

1. Các thẻ có kiểu Block

Thẻ có kiểu block bắt đầu trên 1 dòng mới và có chiều rộng chiếm hết cả dòng đó.

Một số thẻ có kiểu Block:

<div>, <h1> – <h6>, <p>, <form>, <header>, <footer>, <section>, <li>, v.v…

Ví dụ 1:

Kết quả:

display with block and inline
Hình 1. Thẻ div có thuộc tính display với giá trị block

Chú ý: các bạn thấy 2 thẻ div và 1 thẻ p đều có nội dung được bắt đầu trên dòng mới.

2. Các thẻ có kiểu Inline

Thẻ có kiểu Inline khôn g bắt đầu trên 1 dòng mới và chỉ chiếm khoảng chiều rộng vừa đủ.

Một số thẻ có kiểu Inline:

<span>, <a> – <img>, v.v…

Thẻ <a> ở ví dụ 1 có kiểu display là inline.

3. Thay đổi giá trị mặc định của display

Như đã nói ở 2 phần trên, mỗi thẻ HTML đều có những giá trị display mặc định. Tuy nhiên, bạn có thể thay đổi những giá trị display này để trang web thêm đa dạng mà vẫn tuân theo các chuẩn web.

Ví dụ 2: Thay đổi kiểu display: inline với thẻ <li>

Kết quả:

Change value of display property
Hình 2. Thay đổi kiểu display với các thẻ

4. Ẩn thẻ HTML sử dụng thuộc tính display

Để ẩn một thẻ HTML đi, các bạn sử dụng thuộc tính display: none

Ví dụ 3:

Kết quả:

Hình 3. Thẻ

  • với thuộc tính display: none

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.