Sử dụng width, max-width và margin: auto;
Như đã đề cập trong chương
trước; một phần tử mức-khối (block-level) luôn chiếm toàn bộ chiều rộng toàn có
sẵn (trải dài từ trái sang phải như nó có thể).
Thiết lập width cho một phần tử mức-khối sẽ ngăn chặn nó từ trải dài ra đến các cạnh của
phần tử chưa nó. Khi đó, bạn có thể thiết lập margin là tự động (auto), để phần
tử nằm chính giữa phần tử chứa nó. Phần tử sẽ chiếm chiều rộng cụ thể, và không
gian còn lại sẽ được chia bằng nhau giữa hai lề:
Phần tử <div> có chiều
rộng 500px, và margin được thiết lập là auto.
Lưu ý: Vấn đề với <div> ở trên xảy ra khi cửa sổ
trình duyệt nhỏ hơn chiều rộng của phần
tử. Trình duyệt khi đó sẽ thêm một thanh cuộn ngang cho trang.
Bằng cách sử dụng max-width, trong trường hợp này, sẽ cải thiện xử lý của trình duyệt có
cửa sổ nhỏ. Điều này là quan trọng khi làm một trang web khả dụng trên các thiết
bị nhỏ:
Phần tử <div> này có
max-width (chiều rộng tối đa) là 500px, và margin là auto (tự động).
Mẹo: Kéo cửa sổ trình duyệt tới chiều rộng nhỏ hơn 500px, để thấy sự
khác biệt giữa hai div!
Dưới đây là một ví dụ về hai
div ở trên:
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid
#73AD21;
}
Try it
yourself »
CodeLean.vn
Facebook: CodeLean Community
Đăng nhận xét