Khi thiết kế web, bạn cần quy định kích thước cụ thể cho phần tử: chiều cao hộp, chiều rộng văn bản... Thuộc tính height và width giải quyết việc này.
CSS Height và Width
width và height thiết lập kích thước vùng nội dung (content area) của hộp. Chúng không ảnh hưởng đến margin hay padding.
Cú pháp:
height: heightValue;
width: widthValue;
Giá trị chấp nhận:
auto: Trình duyệt tự tính (mặc định).length: px, em, rem...percentage: % kích thước phần tử cha.initial: Giá trị mặc định.inherit: Kế thừa từ phần tử cha.
Ví Dụ: Hộp Giới Thiệu Quán Cà Phê
Hộp 200x200px, nền xám nhạt.
<p class="aboutBox">The Pickled Apple... phục vụ trà, cà phê, bánh ngon từ 2004.</p>
.aboutBox {
height: 200px;
width: 200px;
background-color: lightgray;
}
Min/Max Height & Width - Thiết Kế Responsive
Width/height cố định không thay đổi khi resize cửa sổ. Trên mobile, hộp 500px có thể tràn màn hình.
Dùng min-width, max-width, min-height, max-height để hộp thích ứng. Giá trị này ghi đè width/height cố định.
min-width: Chiều rộng tối thiểu (không hẹp hơn).max-width: Chiều rộng tối đa (không rộng hơn).- Tương tự cho height.
Ví Dụ: Hộp Responsive
Max-width 500px, min-width 100px.
.aboutBox {
max-width: 500px;
min-width: 100px;
background-color: lightgray;
}
Kéo resize trình duyệt: hộp co giãn nhưng không vượt 500px và không hẹp dưới 100px.
Kết Luận
height/width đặt kích thước cố định. Để responsive, dùng min/max-width/height. Bạn đã sẵn sàng kiểm soát kích thước phần tử như chuyên gia!