Bố cục trong CSS – width và max-width

Cách sử dụng awidth, max-awidth và margin: auto;

Như bạn đã biết, một phần tử block-level  luôn chiếm toàn bộ chiều rộng cho phép (trải từ trái sang phải). Thiết lập thuộc tính awidth cho phần tử block-level sẽ ngăn không cho phần tử trải toàn bộ chiều rộng. Phần tử đó sẽ chiếm chiều rộng mà bạn thiết lập, khoảng trống còn lại sẽ được chia đều giữa hai lề.

Lưu ý: vấn đề với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn độ rộng của phần tử. Trình duyệt sau đó thêm một thanh cuộn ngang vào trang.

Thay vào đó sử dụng chiều rộng tối đa, trong trường hợp này sẽ cải thiện việc xử lý các trình duyệt của các cửa sổ nhỏ. Điều này rất quan trọng khi tạo một trang web có thể sử dụng được trên các thiết bị nhỏ:

Mẹo: thay đổi kích thước cửa sổ trình duyệt xuống dưới 500px, để thấy sự khác biệt giữa hai div!

Đây là một ví dụ của hai div trên:

div.ex1 {
    awidth: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-awidth: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}