Thuộc tính hiển thị display

Thuộc tính display là thuộc tính quan trọng nhất để kiểm soát bố cục trang web

Thuộc tính display chỉ định cách hiển thị của một phần tử trong trang web

Mọi phần tử HTML đều có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị display mặc định cho hầu hết các phần tử là block (khối) hoặc inline (nội tuyến)

display: block

Khi sử dụng giá trị block thì phần tử đó sẽ được hiển thị trên một dòng độc lập và chiếm toàn bộ chiều rộng có sẵn (trải dài từ trái qua phải hết mức có thể)

Cú pháp

element{
    display: block;
}

Ví dụ

display: inline

Khi sử dụng giá trị inline thì phần tử đó sẽ được hiển thị dưới dạng phần tử nội tuyến (hiển thị trên cùng một dòng, xuống dòng khi vượt quá độ rộng). Đối với giá trị này, thuộc tính chiều rộng (width) và chiều cao (height) và margin (top - bottom), padding (top - bottom) không có tác dụng.

Cú pháp

element{
    display: inline;
}

Ví dụ

display: inline-block

Với giá trị inline-block, các phần tử sẽ hiển thị theo dạng display:inline (nghĩa là các phần tử sắp xếp trên cùng một dòng). Tuy nhiên, bên cạnh đó, các phần tử cũng sẽ có giá trị dạng block nhờ đó có thể can thiệp được chiều rộng, chiều cao, margin và padding cả 4 hướng khác nhau.

Cú pháp

element{
    display: inline-block;
}

Ví dụ

display: none

Khi sử dụng giá trị none, các phần tử sẽ bị loại bỏ hoàn toàn. Khi chúng ta muốn ẩn một phần tử nào đó, chỉ cần đặt chế độ hiển thị của nó về none

Cú pháp

element{
    display: none;
}

Ngoài ra, có rất nhiều kiểu hiển thị cho các phần tử HTML. Trong các phần sau, chúng ta sẽ tìm hiểu một chế độ hiển thị mới - Flex - Một chế độ hiển thị vùng chứa linh hoạt cấp khối.