Thuộc tính height và width trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Thuộc tính height và width trong CSS

Thiết lập thuộc tính height và width

Thuộc tính height và width được sử dụng để xác định chiều cao và chiều rộng của phần tử. Thuộc tính height và width có thể để auto (mặc đinh, nghĩa là trình duyệt sẽ tự điều chỉnh chiều cao và chiều rộng). Hoặc xác định theo giá trị đo lường như px, cm…, hoặc theo tỷ lệ % của khối chứa phần tử đó.

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}

Lưu ý: thuộc tính height hoặc width không bao gồm padding, đường viền border hay margin. Chúng ta thiết lập chiều cao / chiều rộng phần bên trong padding, đường viền và margin của phần tử.

Thiết lập thuộc tính max-width

Thuộc tính max-width được sử dụng để xác định độ rộng tối đa của phần tử. Thuộc tính này có thể mang giá trị độ dài như px, cm, hoặc theo tỷ lệ % của khối chứa phần tử đó. Bạn cũng có thể để mặc định, nghĩa là không thiết lập giá trị max-width.

Vấn đề với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử (500px). Vì vâyh trình duyệt sẽ thêm thanh cuộn ngang vào trang. Thay vào đó sử dụng thuộc tính max-width, trong trường hợp này, sẽ cải thiện việc xử lý các trình duyệt của các cửa sổ nhỏ.

Mẹo: kéo cửa sổ trình duyệt xuống nhỏ hơn 500px, để thấy sự khác biệt giữa hai thẻ div.

Lưu ý: Giá trị của thuộc tính max-width sẽ được ưu tiên hơn thuộc tính width.

Ví dụ sau minh họa một phần tử <div> với chiều cao 100 pixel và chiều rộng tối đa 500 pixel:

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}

Tất cả thuộc tính chiều cao và chiều rộng trong CSS

Thuộc tính Mô tả
height thiêt lập chiều cao của phần tử
max-height thiêt lập chiều cao tối đa của phần tử
max-width thiết lập chiều rộng tối đa của phần tử
min-height thiết lập chiều cao tối thiểu của phần tử
min-width thiết lập chiều rộng tối thiểu của phần tử
width thiết lập chiều rộng của phần tử