Bài trước chúng ta đã bàn luận về cách tạo style cho border bao quanh mỗi phần tử, padding bên trong mỗi vùng và căn lề xung quanh chúng. Bài này chúng ta cùng tìm hiểu cách thay đổi kích cỡ của các vùng 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.
Nội dung chính
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> <meta charset="UTF-8"> </head> <body> <p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có độ rộng là 400 pixel và chiều cao là 100 pixel </p> </body> </html>
Kết quả:
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> <meta charset="UTF-8"> </head> <body> <p style="width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;"> Đoạn văn có độ rộng là 400 px và chiều cao là 100 px. Trong đó, line height la 30 px. Đoạn văn có độ rộng là 400 px và chiều cao là 100 px. Trong đó, line height la 30 px. Đoạn văn có độ rộng là 400 px và chiều cao là 100 px. Trong đó, line height la 30 px. </p> </body> </html>
Kết quả:
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.
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> <meta charset="UTF-8"> </head> <body> <p style="width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có độ rộng là 400 px và chiều cao là 10 px. Đoạn văn có độ rộng là 400 px và chiều cao là 10 px. Đoạn văn có độ rộng là 400 px và chiều cao là 10 px. Đoạn văn có độ rộng là 400 px và chiều cao là 10 px. </p> <br> <br> <br> <p> Ví dụ max-height trong CSS </p> </body> </html>
Kết quả:
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.
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>
<meta charset="UTF-8">
</head>
<body>
<p style="width:400px; min-height:200px; border:1px solid red;
padding:5px; margin:10px;">
Đoạn văn có độ rộng là 400 px và chiều cao tối thiểu (min height) là 200 px.
Đoạn văn có độ rộng là 400 px và chiều cao tối thiểu (min height) là 200 px.
Đoạn văn có độ rộng là 400 px và chiều cao tối thiểu (min height) là 200 px.
Đoạn văn có độ rộng là 400 px và chiều cao tối thiểu (min height) là 200 px.
</p>
<p> Ví dụ min-height trong CSS </p>
</body>
</html>
Kết quả:
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.
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> <meta charset="UTF-8"> </head> <body> <p style="max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có chiều cao là 200 px và độ rộng tối đa (max width) là 100px. Đoạn văn có chiều cao là 200 px và độ rộng tối đa (max width) là 100px. </p> <p> Ví dụ max-width trong CSS </p> </body> </html>
Kết quả:
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.
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> <meta charset="UTF-8"> </head> <body> <p style="min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> Đoạn văn có chiều cao là 100 px va độ rộng tối thiểu (min width) là 400px. Đoạn văn có chiều cao là 100 px va độ rộng tối thiểu (min width) là 400px. </p> <p> Ví dụ min-width trong CSS </p> </body> </html>
Kết quả: