Kích cỡ trong CSS

Đế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>

Quảng cáo

Kết quả là:

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à:

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="../css/images/logo.png" width="195" height="84" />
   </body>
</html>

Kết quả là:

Quảng cáo

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; 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="../css/images/logo.png" width="95" height="84" />
   </body>
</html>

Kết quả là:

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="../css/images/logo.png" width="95" height="84" />
   </body>
</html>

Kết quả là:

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="min-width:400px; height:100px; border:1px solid red; padding:5px;  margin:10px;">
      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.
      <img alt="logo" src="../css/images/css.gif" width="95" height="84" />
   </body>
</html>

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: