Thuộc tính height trong CSS

1) Nhắc lại “các thành phần của một phần tử”

– Thông thường, cấu trúc của một phần tử HTML sẽ bao gồm bốn thành phần:

• margin (phần lề nằm giữa đường viền của phần tử với các phần tử xung quanh)
• border (đường viền của phần tử)
• padding (vùng đệm nằm giữa đường viền của phần tử với nội dung của phần tử)
• content (nội dung của phần tử)

– Dưới đây là hình ảnh minh họa về cấu trúc của một phần tử HTML.

margin

border

padding

content

2) Thuộc tính height trong CSS

– Thuộc tính height dùng để thiết lập chiều cao phần nội dung (content) của phần tử HTML.

– Lưu ý: Thuộc tính height chỉ thiết lập chiều cao của phần nội dung chứ không phải chiều cao của phần tử HTML, bởi vì chiều cao của phần tử HTML bao gồm đến bốn phần:

• Chiều cao phần margin.
• Chiều cao phần border.
• Chiều cao phần padding.
• Chiều cao phần content.

– Dưới đây là hình ảnh minh họa cho phần chiều cao được thiết lập bởi thuộc tính height:

margin

border

padding

content

3) Cách sử dụng thuộc tính height trong CSS

– Để sử dụng thuộc tính height, ta dùng cú pháp như sau:

height: auto|length|percent|initial|inherit;

– Trong đó, ta thấy giá trị của thuộc tính height có thể được xác định bởi một trong năm loại:

auto

– Trình duyệt sẽ tự động thiết lập chiều cao phần nội dung của phần tử.

Xem ví dụ

length

– Thiết lập chiều cao phần nội dung của phần tử dựa theo một giá trị cụ thể (giá trị này có thể được xác định theo đơn vị px, em, cm, ….)

Xem ví dụ

percent

– Thiết lập chiều cao phần nội dung phần tử dựa theo tỷ lệ phần trăm chiều cao phần nội dung của phần tử chứa nó.

Xem ví dụ

initial

– Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính height có giá trị là auto)

Xem ví dụ

inherit

– Kế thừa giá trị thuộc tính height từ phần tử cha của nó.

Xem ví dụ