Làm việc với width và height
Width (độ rộng) và height (chiều cao) của một phần tử được thiết lập sử dụng các đặc tính width và
height sau:
width:value;
height:value;
nơi value là độ rộng hay chiều cao sử dụng một trong những đơn vị đo lường CSS hay như một tỉ lệ %
của width hay height của phần tử cha. Ví dụ, quy tắc style sau thiết lập width của page body bằng 95 %
của width của phần tử cha của nó (cửa sổ trình duyệt):
body {width:95%;}
Thường thì, bạn không thiết lập giá trị height vì các trình duyệt tự động tăng chiều cao của phần tử
để khớp với nội dung của nó. Chú ý rằng tất cả phần tử mức khối, như phần tử body, có một width mặc
định là 100%. Vì vậy, quy tắc style này làm phần tử body nhỏ hơn một chút so với mặc định.
Thiết lập kích thước tối đa và tối thiểu
Bạn có thể thiết lập các giới hạn trên width hay height của một phần tử khối bằng cách áp dụng các đặc
tính sau:
min-width:value;
min-height:value;
max-width:value;
max-height:value;
nơi value lại một lần nữa là một độ dài được thể hiện bởi một trong những đơn vị đo lường CSS (thường là
pixels để khớp với đơn vị đo lường của thiết bị hiển thị). Ví dụ, quy tắc style sau thiết lập width của page
body bằng 95% độ rộng của cửa sổ trình duyệt nhưng tinh chỉnh trong một phạm vi từ 640 đến 1680 pixels:
body{width:95%;
min-width:640px;
max-width:1680px;
}
Độ rộng tối đa và tối thiểu thường được sử dụng để làm page text dễ dàng hơn để đọc. Các nghiên cứu thể hiện
rằng các dòng của text cái quá rộng là khó để đọc vì mắt người phải quét qua một phần dài nội dung và rằng các dòng
text cái quá hẹp với nhiều line returns, chia nhỏ dòng chảy của tài liệu.