Chiều cao và độ rộng trong CSS

Thiết lập chiều cao và độ rộng trong CSS

Các đặc tính height và width được dùng để thiết lập chiều cao và độ rộng của phần tử trong CSS. Chúng có thể nhận các giá trị sau:

• auto - là chế độ mặc định, trong đó trình duyệt tự tính toán chiều cao và độ rộng
• length - giá trị tính theo px, cm…
• percent (%) - giá trị tính theo phần trăm

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

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

Hình ảnh hiển thị trên trình duyệt của 2 ví dụ trên

Lưu ý: Đặc tính height và width không tính phần padding, đường viền, lề. Chúng sẽ xác định chiều cao/độ rộng của khu vực bên trong phần padding, đường viền, lề của phần tử.

Thiết lập max-width

Đặc tính max-width dùng để chọn độ rộng tối đa cho phần tử, có thể dùng các giá trị:

• length - độ dài theo px, cm…
• percen (%) - phần trăm
• không - đây là chế độ mặc định, nghĩa là không có giới hạn tối đa

Vấn đề có thể xảy ra với thẻ <div> bên trên là khi cửa sổ trình duyệt nhỏ hơn độ rộng phần tử (500px), trình duyệt sẽ thêm thanh cuộn dọc vào rtang. Nếu dùng max-width, trình duyệt sẽ xử lý tốt hơn khi cửa sổ nhỏ.

Lưu ý: Giá trị của max-width sẽ ghi đè width.

Ví dụ dưới đây cho thấy phần tử <div> có chiều cao 100px và độ rộng tối đa là 500px.

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

Bài trước: Padding trong CSS

Bài sau: Mô hình hộp (Box Model) trong CSS