Trong CSS, thuộc tính max-width được sử dụng để đặt chiều rộng tối đa của một phần tử. Thuộc tính này đặc biệt hữu ích để đảm bảo rằng một phần tử không vượt quá chiều rộng được chỉ định, đặc biệt khi chế độ xem hoặc vùng chứa chính hẹp hơn.

Đây là cú pháp cơ bản để sử dụng max-width :

 css
 selector {
  max-width: value;
}

bộ chọn : Thay thế phần này bằng bộ chọn cho phần tử HTML mà bạn muốn tạo kiểu.
value : Thay thế giá trị này bằng chiều rộng tối đa bạn muốn đặt. Điều này có thể được chỉ định theo nhiều đơn vị khác nhau như pixel ( px ), ems ( em ), phần trăm (%) hoặc các đơn vị độ dài CSS hợp lệ khác.

Ví dụ: nếu bạn muốn đặt chiều rộng tối đa của một phần tử có "example" ID thành 500 pixel, bạn sẽ sử dụng CSS sau:

 css
 #example {
  max-width: 500px;
}

Điều này đảm bảo rằng phần tử sẽ không vượt quá chiều rộng 500 pixel, bất kể chiều rộng nội dung thực tế là bao nhiêu.

Đây là một ví dụ nhanh với đoạn mã HTML:

 html
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      max-width: 800px;
      margin: 0 auto; /* Center the container horizontally */
      padding: 20px;
      background-color: #f0f0f0;
    }
  </style>
  <title>Max-width Example</title>
</head>
<body>
  <div class="container">
    <!-- Your content goes here -->
    <p>This is an example with a maximum width of 800 pixels.</p>
  </div>
</body>
</html>

Trong ví dụ này, lớp .container có max-width trong số 800 pixel, đảm bảo rằng nó sẽ không mở rộng ra ngoài chiều rộng đó và nó được căn giữa trong khung nhìn bằng cách sử dụng margin: 0 auto; . Điều chỉnh các giá trị dựa trên yêu cầu cụ thể của bạn.