Thuộc tính max-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.

2) Thuộc tính max-width trong CSS

- Thuộc tính max-width được sử dụng để thiết lập "chiều rộng tối đa" cho phần nội dung của phần tử, điều đó có nghĩa là chiều rộng phần nội dung của phần tử sẽ không bao giờ có thể vượt quá giá trị của thuộc tính này (Xem ví dụ)

- Lưu ý: Đối với phần tử sử dụng thuộc tính width, nếu chiều rộng phần nội dung của cha nó nhỏ hơn chiều rộng của nó thì nó sẽ bị tràn ra ngoài. Còn đối với phần tử sử dụng thuộc tính max-width, nếu chiều rộng phần nội dung của cha nó nhỏ hơn chiều rộng của nó thì nó sẽ tự động thu hẹp lại để có thể nằm gọn bên trong phần nội dung của cha nó (Xem ví dụ)

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

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

max-width: none|length|percent|initial|inherit;

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