Tăng Kích Thước Chiều Rộng và Chiều Cao của Hộp với Thuộc Tính Width và Height
Tùy thuộc vào thuộc tính box-resize của phần tử, thuộc tính width và height sẽ thay đổi tương ứng với chiều rộng và chiều cao của phần tử hoặc phần content của phần tử.
-
Nếu box-resize có giá trị là content-box: Khi đó, thuộc tính width và height chính là chiều rộng và chiều cao của phần content (không bao gồm padding, border, margin).
-
Nếu box-resize có giá trị là border-box: Khi đó, thuộc tính width và height sẽ là tổng chiều rộng và chiều cao của phần tử (bao gồm content, padding, border, margin).
Cú pháp:
width: <length> | <percentage> | auto;
height: <length> | <percentage> | auto;
Chiều rộng (width) và chiều cao (height) có thể được biểu diễn dưới dạng độ dài, phần trăm hoặc auto (do trình duyệt tính toán dựa trên cấu trúc phần tử theo quy tắc mặc định).
Ví dụ 1) Thiết lập chiều rộng là 190px và chiều cao là 90px khi box-sizing là border-box và content-box (giá trị mặc định):
<style>
.exam1 { box-sizing: border-box; border: 5px solid green; width: 190px; height: 120px; }
.exam2 { box-sizing: content-box; border: 5px solid red; width: 190px; height: 120px; }
</style>
<div class="exam1">Phần tử này có tổng chiều cao là 120px và tổng chiều rộng là 190px.</div>
<div class="exam2">Phần tử này có tổng chiều cao là 130px và tổng chiều rộng là 200px.</div>Hãy xem thêm phần về BOX CSS để biết cách xác định chiều cao, chiều rộng thực tế của hộp khi được vẽ trong HTML.
Thiết lập Chiều Rộng và Chiều Cao với Giá Trị Phần Trăm
Thuộc tính width và height có thể được thiết lập bằng đơn vị phần trăm (%), cho biết tỷ lệ kích thước của phần content so với phần tử cha. Dưới đây là một ví dụ về chiều rộng theo phần trăm và chiều cao theo px:
<style>
.contain-element { box-sizing: border-box; height: 220px; width: 420px; border: 10px solid green; }
.test-element { box-sizing: border-box; border: 1px solid red; width: 50%; height: 100px; }
</style>
<div class="contain-element">
<div class="test-element">Tổng chiều rộng là <strong>50%</strong> của phần content phần tử cha = 200px; và chiều cao là <strong>100px</strong>.</div>
</div>Thiết Lập Chiều Rộng và Chiều Cao Lớn Nhất và Nhỏ Nhất
Bạn có thể thiết lập giá trị tối thiểu và tối đa cho chiều rộng và chiều cao của phần tử để phần tử tự co dãn dựa trên nội dung trong giới hạn kích thước.
Dưới đây là các thuộc tính áp dụng:
- min-width: độ rộng tối thiểu.
- min-height: chiều cao tối thiểu.
- max-width: độ rộng tối đa.
- max-height: chiều cao tối đa.
Ví dụ:
<style>
p.first { border: 5px solid green; min-height: 100px; }
p.second { border: 5px solid green; max-width: 100px; }
</style>
<p class="first">Chiều cao tối thiểu của đoạn văn này là 100px.</p>
<p class="second">Chiều rộng tối đa của đoạn văn này là 100px.</p>Chiều cao tối thiểu của đoạn văn này là 100px.
Chiều rộng tối đa của đoạn văn này là 100px.