Trong hướng dẫn này, bạn sẽ học cách đặt chiều rộng và chiều cao của một phần tử bằng CSS.

Đặt kích thước phần tử

    CSS có một số thuộc tính kích thước, chẳng hạn như width, height, ... và cho phép bạn kiểm soát chiều rộng và chiều cao của một phần tử. Các phần sau mô tả cách sử dụng các thuộc tính này để tạo bố cục trang web tốt hơn: max-width, min-width, max-height, min-height.

Đặt chiều rộng và chiều cao

    Thuộc tính width và height xác định chiều rộng và chiều cao của vùng nội dung của một phần tử.

    Chiều rộng và chiều cao này không bao gồm phần đệm, đường viền hoặc lề. Xem Box Model CSS để biết cách tính chiều rộng và chiều cao hiệu dụng của hộp phần tử.

    Hãy thử ví dụ sau và xem nó thực sự hoạt động như thế nào:

div {
    width: 300px;
    height: 200px;
}

    Các quy tắc kiểu ở trên chỉ định chiều rộng cố định là 300 pixel và chiều cao là 200px cho <div>.

    Thuộc tính width và height có thể nhận các giá trị sau:

• Kích thước - Chỉ định chiều rộng tính bằng px, em, rem, pt, cm, v.v.
• % - Chỉ định chiều rộng tính bằng phần trăm (%) chiều rộng của phần tử chứa.
• auto - Trình duyệt tính toán chiều rộng phù hợp cho phần tử.
• initial - Đặt chiều rộng và chiều cao thành giá trị mặc định của nó, là auto.
• inherit - Chỉ định rằng chiều rộng sẽ được kế thừa từ phần tử cha.

    Bạn không thể chỉ định giá trị âm cho thuộc tính chiều rộng và chiều cao.

Đặt chiều rộng và chiều cao tối đa

    Bạn có thể sử dụng thuộc tính max-width và max-height để chỉ định chiều rộng và chiều cao tối đa của vùng nội dung. Chiều rộng và chiều cao tối đa này không bao gồm phần đệm, đường viền hoặc lề.

    Một phần tử không thể rộng hơn max-width, ngay cả khi width được đặt giá trị lớn hơn. Chẳng hạn, nếu width được đặt thành 300px và max-width đặt thành 200px, thì chiều rộng thực của phần tử sẽ là 200px. Hãy xem một ví dụ:

div {
    width: 300px;
    max-width: 200px;
}

    Tương tự như vậy, một phần tử đã được max-height áp dụng sẽ không bao giờ cao hơn giá trị đã chỉ định, ngay cả khi height được đặt thành giá trị lớn hơn. Ví dụ: nếu được height đặt thành 200px và max-height đặt thành 100px, thì chiều cao thực tế của phần tử sẽ là 100px.

div {
    height: 200px;
    max-height: 100px;
}

Đặt chiều rộng và chiều cao tối thiểu

    Bạn có thể sử dụng thuộc tính min-width và min-height chỉ định chiều rộng và chiều cao tối thiểu của vùng nội dung. Chiều rộng và chiều cao tối thiểu này không bao gồm phần đệm, đường viền hoặc lề.

    Một phần tử không thể hẹp hơn min-width, ngay cả khi width được đặt thành giá trị nhỏ hơn. Ví dụ: nếu được width đặt thành 300px và min-width đặt thành 400px, thì chiều rộng thực của phần tử sẽ là 400px. Hãy xem nó thực sự hoạt động như thế nào:

div {
    width: 200px;
    min-width: 300px;
}

    Tương tự, một phần tử được áp dụng min-height sẽ không bao giờ nhỏ hơn giá trị đã chỉ định, ngay cả khi height được đặt thành giá trị nhỏ hơn. Ví dụ: nếu height được đặt thành 200px và min-height đặt thành 300px, thì chiều cao thực của phần tử sẽ là 300px.

div {
    height: 100px;
    min-height: 200px;
}

Đặt phạm vi chiều rộng và chiều cao

    Thuộc tính min-width và min-heightthường được sử dụng kết hợp với thuộc tính max-width và max-heightđể tạo phạm vi chiều rộng và chiều cao cho một phần tử.

    Điều này có thể rất hữu ích để tạo ra thiết kế linh hoạt. Trong ví dụ sau, chiều rộng tối thiểu của <div> sẽ là 300px và nó có thể kéo dài theo chiều ngang lên tới tối đa 500px.

div {
    min-width: 300px;
    max-width: 500px;
}

    Tương tự, bạn có thể xác định phạm vi chiều cao cho một phần tử. Trong ví dụ bên dưới, chiều cao tối thiểu của <div> sẽ là 300px và nó có thể kéo dài theo chiều dọc lên đến tối đa 500px.

div {
    min-height: 300px;
    max-height: 500px;
}