Width và height
Như đã học ở các bài trước, chỉ có phần tử mức khối mới có width (chiều rộng) và height (chiều
cao).
+ Đặc tính width thiết lập chiều rộng của một phần tử trong mô hình hộp.
+ Đặc tính height thiết lập chiều cao của một phần tử trong mô hình hộp.
Các giá trị các đặc tính này có thể nhận là:
+ length
+ %
+ auto
Giá trị auto cho width và height
Theo mặc định, các đặc tính width và height có giá trị auto. Vì vậy, nếu bạn không chỉ ra width
và height của phần tử, giá trị của các đặc tính này sẽ là auto. Nghĩa của từ khóa auto thay đổi
phụ thuộc vào dạng phần tử mà nó áp dụng.
Ví dụ, khi auto áp dụng cho phần tử <div>, phần tử mở rộng tất cả không gian chiều ngang có sẵn
đối với nó và mở rộng theo chiều dọc để dành chỗ cho nội dung bên trong nó, bao gồm text, ảnh.
Các phần tử có hành vi này được gọi là phần tử khối (block elements). Một vài ví dụ về phần tử
khối là <div>, <p>, <h1> qua <h6>, <form> và <ul>…
Phần tử <table> là một ví dụ khác về dạng phần tử nơi giá trị auto có nghĩa khác. Không giống
các phần tử khối, các phần tử <table> không lấy tất cả không gian chiều ngang có sẵn đối với chúng.
Thay vào đó, chúng chỉ lấy chỗ cần thiết dựa trên nội dung chúng chứa.
Giá trị % cho width và height
Khi một đo lường % được sử dụng, kích cỡ mà % dựa vào là kích cỡ của phần tử cha phần tử. Ví dụ,
một phần tử có width value là 50 % cái có phần tử cha của nó với width value là 600 pixels,sẽ có
width value được tính toán là 300 pixels.