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

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

Thuộc tính height và awidth đượ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à awidth 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;
    awidth: 50%;
    background-color: powderblue;
}

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

Lưu ý: thuộc tính height hoặc awidth 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-awidth

Thuộc tính max-awidth đượ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-awidth.

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-awidth, 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-awidth sẽ được ưu tiên hơn thuộc tính awidth.

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-awidth: 500px;
    height: 100px;
    background-color: powderblue;
}

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