CSS Height và Width

17/05/2019

Bài sau » « Bài trước

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

Thuộc tính heightwidth có thể được thiết lập tự động (auto - Đây là thuộc tính mặc định, nghĩa là trình duyệt tính toán width và height) hoặc thiết lập với giá trị cụ thể (với đơn vị px, pt, em, rem,...) hoặc theo % của phần tử chứa nó.

Thẻ p này có width 50% và height 200px

p{ width: 50%; height: 200px; background: powderblue; }

Chú ý: Thuộc tính heightwidth chỉ bao quanh nội dung của phần tử HTML mà không bao gồm padding, bordermargin .

CSS Height và width

Ví dụ như hình trên ta có: Phần tử HTML có width 415px, height 180px nằm trong cùng và các phần padding, border và margin bao quanh ở ngoài. Như vậy, ở hình trên sao khi tính tổng lại thì ta có width 415px + 10px left + 10px right = 435px, height 180px + 10px top + 10px bottom = 200px.

Thuộc tính max-width

Thuộc tính max-width dùng để thiết lập chiều rộng tối đa của phần tử HTML.

Thuộc tính max-width có thể nhận các giá trị: giá trị cụ thể (với đơn vị như px, pt, em, rem,...), đơn vị % (tính theo % của phần tử chứa nó) hoặc thiết lập none (đây là thuộc tính mặc định. Nghĩa là phần tử không có kích thước tối đa).

Vấn đề xảy ra khi thẻ HTML có width là 500px, nhưng màn hình có kích thước nhỏ hơn (Iphone 6 - 375px) thì trình duyệt sẽ có thanh scrollbar ở dưới cùng. Khi đó ta chỉ cần dùng max-width là 500px. Xem ví dụ bên dưới:

Thẻ p này có max-width 500px và height 200px.

p{ max-width: 500px; height: 200px; background: powderblue; }

Chú ý: Giá trị của thuộc tính max-width sẽ ghi đè giá trị width.

Các thuộc tính khác

Ngoài ra, còn có các thuộc tính khác như sau:

  • min-width: Chỉ định chiều rộng tối thiểu .
  • max-height: Chỉ định chiều cao tối đa.
  • min-height: Chỉ định chiều cao tối thiểu.

Các giá trị của các thuộc tính trên cũng là : giá trị cụ thể (theo đơn vị px, pt, em, rem,...) hoặc đơn vị % (tính theo % phần tử chứa nó ) hoặc none (thiết lập mặc định).


Bài sau » « Bài trước
Back to top