Thiết lập kích thước cho phần tử HTML bằng CSS

Thiết lập chiều rộng và chiều cao
Thuộc tính width dùng để thiết lập chiều rộng cho phần nội dung của phần tử.

Thuộc tính height dùng để thiết lập chiều cao cho phần nội dung của phần tử.

Lưu ý: Chiều rộng và chiều cao không bao gồm phần padding, border, margin.

Hình ảnh minh họa dưới đây sẽ cho bạn thấy rõ phần nào là chiều rộng, phần nào là chiều cao:

  • Margin
  • Border
  • Padding
  • Width
  • Height

Giá trị của thuộc tính width và height có thể xác định theo đơn vị: px, em, % (phần trăm kích thước phần nội dung của phần tử chứa nó)

Ví dụ

Lưu ý: Nếu ta không thiết lập chiều rộng và chiều cao cho phần tử thì trình duyệt sẽ tự động thiết lập (Nếu là phần tử khối thì nó sẽ có chiều rộng là 100%).

Thuộc tính max-width
Nếu ta thiết lập chiều rộng cho một phần tử quá dài mà trong khi phần tử chứa nó lại quá ngắn thì sẽ dẫn đến việc phần tử chứa nó tự động tạo một thanh scroll nằm ngang mất thẫm mỹ (Xem ví dụ)

Từ đây, thuộc tính max-width được dùng để thiết lập chiều rộng cho phần tử kèm theo tính năng tự động thu hẹp chiều rộng nếu phần tử chứa nó quá ngắn.

Ví dụ, tôi có phần tử div1 thiết lập width:800px và phần tử div2 thiết lập max-width:800px

Nếu phần tử chứa phần tử div1 quá ngắn so với 800px thì phần tử chứa phần tử div1 sẽ tạo một thanh scroll nằm ngang.
Nếu phần tử chứa phần tử div2 quá ngắn so với 800px thì chiều rộng của phần tử div2 sẽ tự động rút ngắn lại sao cho nằm trọn bên trong phần tử chứa nó.
Ví dụ

Giá trị của thuộc tính max-width có thể xác định theo đơn vị: px, em, %, hoặc none (none tức là không thiết lập chiều rộng tối đa).

Lưu ý: Thuộc tính max-width sẽ ghi đè lên thuộc tính width.

Thuộc tính max-height
Thông thường, khi ta thiết lập chiều cao cho một phần tử, mặc cho phần nội dung của nó dài hay ngắn thì chiều cao của phần tử vẫn luôn không thay đổi (Xem ví dụ)

Từ đây, thuộc tính max-height dùng để thiết lập chiều cao cho phần tử kèm theo tính năng tự động rút thấp lại hoặc kéo cao ra phụ thuộc vào nội dung của phần tử (nhưng đương nhiên chiều cao của phần tử sẽ không vượt quá giá trị được thiết lập).

Ví dụ

Thuộc tính min-width
Thuộc tính min-width dùng để thiết lập chiều rộng cho phần tử tương tự như thuộc tính width, nó cũng sẽ tạo ra một thanh scroll nằm ngang nếu chiều rộng của phần tử chứa nó quá hẹp so với chiều rộng của nó.

Tuy nhiên, điểm khác nhau giữa hai thuộc tính này là:

Phần tử được thiết lập bởi thuộc tính width sẽ có chiều rộng mặc định
Phần tử được thiết lập bởi thuộc tính min-width sẽ có chiều rộng tối đa khi chiều rộng của phần tử chứa nó rộng hơn nó. Và chiều rộng của phần tử này sẽ thu hẹp lại bằng với giá trị được thiết lập khi chiều rộng của phần tử chứa nó trở nên hẹp hơn nó.
Ví dụ

Thuộc tính min-height
Thuộc tính min-height dùng để thiết lập chiều cao tối thiếu cho một phần tử. Nếu nội dung có phần tử đó quá cao thì chiều cao của phần tử sẽ tự động được tăng lên.

Ví dụ

Thuộc tính overflow
Thông thường, nếu kích thước phần nội dung của phần tử lớn hơn chiều rộng hoặc chiều cao của phần tử, thì nội dung đó sẽ bị tràn ra bên ngoài (Xem ví dụ)

Để khắc phục tình trạng này, ta có thể sử dụng thuộc tính overflow với giá trị auto (tự tạo thanh scroll cho phần tử đó) hoặc giá trị hidden (ẩn phần bị tràn)

Ví dụ

 

Học CSS