CSS - Thứ nguyên

Bạn đã thấy đường viền bao quanh mỗi hộp tức là. , phần đệm có thể xuất hiện bên trong mỗi hộp và lề có thể đi quanh chúng. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách chúng ta có thể thay đổi kích thước của các hộp.

Chúng tôi có các thuộc tính sau cho phép bạn kiểm soát kích thước của hộp.

Các height thuộc tính được sử dụng để thiết lập chiều cao của một hộp.
Các width thuộc tính được sử dụng để thiết lập chiều rộng của một hộp.
Các line-height thuộc tính được sử dụng để đặt chiều cao của một dòng văn bản.
Các max-height thuộc tính được sử dụng để thiết lập chiều cao tối đa của một hộp.
Các min-height thuộc tính được sử dụng để thiết lập chiều cao tối thiểu của một hộp.
Các max-width thuộc tính được sử dụng để đặt chiều rộng tối đa mà một hộp có thể có.
Các min-width thuộc tính được sử dụng để đặt chiều rộng tối thiểu mà một hộp có thể có.

Thuộc tính Chiều cao và Chiều rộng

Thuộc tính chiều cao và chiều rộng cho phép bạn đặt chiều cao và chiều rộng cho các hộp. Chúng có thể nhận các giá trị về độ dài, tỷ lệ phần trăm hoặc từ khóa tự động.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400pixels wide and 100 pixels high
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính chiều cao dòng

Thuộc tính line-height cho phép bạn tăng khoảng cách giữa các dòng văn bản. Giá trị của thuộc tính line-height có thể là một số, một độ dài hoặc một tỷ lệ phần trăm.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;">
         This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
         This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
      </p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính chiều cao tối đa

Thuộc tính max-height cho phép bạn chỉ định chiều cao tối đa của hộp. Giá trị của thuộc tính max-height có thể là một số, một độ dài hoặc một tỷ lệ phần trăm.

NOTE - Thuộc tính này không hoạt động trong Netscape 7 hoặc IE 6.

Đây là một ví dụ -

<html>
   <head>
   </head>  
   <body>
      <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
         This paragraph is 400px wide and max height is 10px
      </p>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính chiều cao tối thiểu

Thuộc tính min-height cho phép bạn chỉ định chiều cao tối thiểu của một hộp. Giá trị của thuộc tính min-height có thể là một số, một độ dài hoặc một tỷ lệ phần trăm.

NOTE - Thuộc tính này không hoạt động trong Netscape 7 hoặc IE 6.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
         This paragraph is 400px wide and min height is 200px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" />
   </body>
</html>

Nó sẽ tạo ra kết quả sau:

Thuộc tính chiều rộng tối đa

Thuộc tính max-width cho phép bạn chỉ định chiều rộng tối đa của hộp. Giá trị của thuộc tính chiều rộng tối đa có thể là một số, một chiều dài hoặc một tỷ lệ phần trăm.

NOTE - Thuộc tính này không hoạt động trong Netscape 7 hoặc IE 6.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
         This paragraph is 200px high and max width is 100px
      </p>
      <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính chiều rộng tối thiểu

Thuộc tính min-width cho phép bạn chỉ định chiều rộng tối thiểu của một hộp. Giá trị của thuộc tính chiều rộng tối thiểu có thể là số, chiều dài hoặc tỷ lệ phần trăm.

NOTE - Thuộc tính này không hoạt động trong Netscape 7 hoặc IE 6.

Đây là một ví dụ -

<html>
   <head>
   </head>

   <body>
      <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;">
         This paragraph is 100px high and min width is 400px
         This paragraph is 100px high and min width is 400px
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>

Nó sẽ tạo ra kết quả sau: