Thuộc tính width 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 width trong CSS

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

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

• Chiều rộng phần margin.
• Chiều rộng phần border.
• Chiều rộng phần padding.
• Chiều rộng phần content.

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

margin

border

padding

content

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

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

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

– Trong đó, ta thấy giá trị của thuộc tính width 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 rộng phần nội dung của phần tử.

Xem ví dụ

length

– Thiết lập chiều rộng 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 rộng phần nội dung của phần tử dựa theo tỷ lệ phần trăm chiều rộng 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 width có giá trị là auto)

Xem ví dụ

inherit

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

Xem ví dụ