Đến chương này, chúng ta đã biết cách tạo style cho border xung quanh mỗi phần tử, cho phần padding bên trong mỗi hộp và căn lề xung quanh chúng, …. Tiếp theo chúng ta cùng tìm hiểu cách thay đổi kích cỡ của các hộp trong CSS.
Để thay đổi kích cỡ, bạn có thể sử dụng các thuộc tính trong CSS sau:
- Thuộc tính height xác định chiều cao của hộp.
- Thuộc tính width xác định độ rộng của hộp.
- Thuộc tính line-height xác định chiều cao của một dòng văn bản.
- Thuộc tính max-height thiết lập chiều cao tối đa của một hộp.
- Thuộc tính min-height thiết lập chiều cao tối thiểu của một hộp.
- Thuộc tính max-width thiết lập độ rộng tối thiểu của một hộp.
- Thuộc tính min-width thiết lập độ rộng tối thiểu của một hộp.
Các thuộc tính height và width trong CSS
Hai thuộc tính height và width giúp bạn xác định chiều cao và độ rộng cho các hộp. Các thuộc tính này có thể nhận các giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm, hoặc từ khóa auto.
Ví dụ sau minh họa cách thiết lập chiều cao và độ rộng của một hộp bởi sử dụng thuộc tính height và width trong CSS.
<html> <head> </head> <body> <p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> Doan van nay co do rong la 400 pixel va chieu cao la 100 pixel </p> </body> </html>
Kết quả là:
Doan van nay co do rong la 400 pixel va chieu cao la 100 pixel
Thuộc tính line-height trong CSS
Thuộc tính line-height cho phép bạn tăng phần không gian giữa các dòng văn bản. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ví dụ sau minh họa cách sử dụng thuộc tính line-height trong CSS.
<html> <head> </head> <body> <p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;"> Doan van co do rong la 400 px va chieu cao la 100 px. Trong do, line height la 30 px. Doan van co do rong la 400 px va chieu cao la 100 px. Trong do, line height la 30 px. (ban tham khao thuoc tinh line-height trong chuong Tong hop thuoc tinh trong CSS) </p> </body> </html>
Kết quả là:
Doan van co do rong la 400 px va chieu cao la 100 px. Trong do, line height la 30 px. Doan van co do rong la 400 px va chieu cao la 100 px. Trong do, line height la 30 px. (ban tham khao thuoc tinh line-height trong chuong Tong hop thuoc tinh trong CSS)
Thuộc tính max-height trong CSS
Để xác định chiều cao tối đa cho một hộp, bạn có thể sử dụng thuộc tính max-height trong CSS. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ghi chú: IE 6 và Netscape không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách thiết lập chiều cao tối đa cho một hộp bởi sử dụng thuộc tính max-height trong CSS.
<html> <head> </head> <body> <p style="width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;"> Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px. </p> <br> <br> <br> <img alt="logo" src="http://hoclaptrinh.vn/themes/client/img/logo.png" width="195" height="84" /> </body> </html>
Kết quả là:
Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px.
Thuộc tính min-height trong CSS
Để xác định chiều cao tối thiểu cho một hộp, bạn có thể sử dụng thuộc tính min-height trong CSS. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ghi chú IE 6 và Netscape không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách thiết lập chiều cao tối thiểu cho một hộp bởi sử dụng thuộc tính min-height trong CSS.
<html> <head> </head> <body> <p style="width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;"> Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px. Doan van co do rong la 400 px va chieu cao la 10 px. </p> <br> <br> <br> <img alt="logo" src="https://media.hoc.tv/static/logo.png?t=5f284b314acf7" width="195" height="84" /> </body> </html>
Kết quả là:
Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px. Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px. Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px. Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px.
Thuộc tính max-width trong CSS
Để xác định độ rộng tối đa cho một hộp, bạn có thể sử dụng thuộc tính max-width trong CSS. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ghi chú: IE 6 và Netscape không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách thiết lập độ rộng tối đa cho một hộp bởi sử dụng thuộc tính max-width trong CSS.
<html> <head> </head> <body> <p style="max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;"> Doan van co chieu cao la 200 px va do rong toi da (max width) la 100px. Doan van co chieu cao la 200 px va do rong toi da (max width) la 100px. </p> <img alt="logo" src="https://media.hoc.tv/static/logo.png?t=5f284b314acf7" width="95" height="84" /> </body> </html>
Kết quả là:
Doan van co chieu cao la 200 px va do rong toi da (max width) la 100px. Doan van co chieu cao la 200 px va do rong toi da (max width) la 100px.
Thuộc tính min-width trong CSS
Để xác định độ rộng tối thiểu cho một hộp, bạn có thể sử dụng thuộc tính min-width trong CSS. Thuộc tính này có thể nhận giá trị dạng chiều dài (đơn vị px, pt, cm, …), dạng phần trăm.
Ghi chú: IE 6 và Netscape không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách thiết lập độ rộng tối thiểu cho một hộp bởi sử dụng thuộc tính min-width trong CSS.
<html> <head> </head> <body> <p style="width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;"> Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px. Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px. Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px. Doan van co do rong la 400 px va chieu cao toi thieu (min height) la 200 px. </p> <img alt="logo" src="https://media.hoc.tv/static/logo.png?t=5f284b314acf7" width="95" height="84" /> </body> </html>
Kết quả là:
Doan van co chieu cao la 100 px va do rong toi thieu (min width) la 400px. Doan van co chieu cao la 100 px va do rong toi thieu (min width) la 400px.
