Các thuộc tính CSS height
và width
được sử dụng để đặt chiều cao và chiều rộng của một phần tử. Thuộc tính CSS max-width
được sử dụng để đặt chiều rộng tối đa của một phần tử.
Ví dụ:
<div style="height: 100px; width: 100%; padding: 5px; vertical-align: inherit; border: 1px solid red;">Phần tử này có chiều cao là 100px và chiều rộng là 100%.</div>
Hiển thị trên trình duyệt:
Cài đặt chiều cao và chiều rộng trong CSS
Thuộc tính chiều cao và chiều rộng không bao gồm phần đệm, đường viền hoặc lề. Nó đặt chiều cao, chiều rộng của vùng bên trong phần đệm, đường viền và lề của phần tử.
Giá trị chiều cao và chiều rộng CSS
Các thuộc tính height
và width
có thể có các giá trị sau:
auto:
Đây là mặc định. Trình duyệt tính toán chiều cao và chiều rộng.length
: Xác định chiều cao, chiều rộng bằngpx
,cm
…%
: Xác định chiều cao, chiều rộng theo phần trăm của khối chứa.initial
: Đặt chiều cao, chiều rộng thành giá trị mặc định của nó.inherit
: Chiều cao, chiều rộng sẽ được kế thừa từ giá trị mẹ của nó.
Ví dụ về chiều cao và chiều rộng CSS
Ví dụ:
<div style="width: 50%; height: 200px; padding: 10px; background-color: Coral; vertical-align: inherit;"><span style="color: #ffffff;">Phần tử này có chiều cao là 200px và chiều rộng là 50%.</span></div>
Hiển thị trên trình duyệt:
Ví dụ:
<div style="width: 350px; height: 100px; padding: 10px; background-color: coral; vertical-align: inherit;"><span style="color: #ffffff;">Phần tử này có chiều cao là 200px và chiều rộng là 500px.</span></div>
Hiển thị trên trình duyệt:
Ví dụ:
<div style="width: 250px; height: 200px; padding: 10px; background-color: coral; vertical-align: inherit;"><span style="color: #ffffff;">Phần tử này có chiều cao là 200px và chiều rộng là 100px.</span></div>
Hiển thị trên trình duyệt:
Ví dụ:
<div style="width: 300px; height: 150px; padding: 10px; background-color: coral; vertical-align: inherit;"><span style="color: #ffffff;">Phần tử này có chiều cao là 800px và chiều rộng là 50px.</span></div>
Hiển thị trên trình duyệt:
height
và width
không bao gồm phần đệm, đường viền hoặc lề! Nó thiết lập chiều cao, chiều rộng của khu vực bên trong phần đệm, đường viền và lề của phần tử!Đặt chiều rộng tối đa
- Các giá trị của thuộc tính
max-width
được sử dụng để thiết lập chiều rộng tối đa của một phần tử. - Có thể
max-width
được chỉ định trong các giá trị chiều dài nhưpx
,cm
…hoặc % của khối chứa hoặc đặt thànhnone
mặc định. Có nghĩa là không có chiều rộng tối đa. - Sự cố với thẻ
<div>
ở ví dụ dưới xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử thì trình duyệt sẽ thêm một thanh cuộn ngang. - Việc sử dụng
max-width
rong trường hợp này sẽ cải thiện khả năng xử lý các cửa sổ nhỏ của trình duyệt.
<div>
bên dưới.
width
và thuộc tính max-width
trên cùng một phần tử, và giá trị của thuộc tính width
lớn hơn thuộc tính max-width
; thuộc tính max-width
sẽ được sử dụng và thuộc tính width
sẽ bị bỏ qua.
Tất cả các thuộc tính chiều rộng, chiều cao trong CSS
Thuộc tính | Mô tả |
---|---|
height | Đặt chiều cao của một phần tử. |
max-height | Đặt chiều cao tối đa của một phần tử. |
max-width | Đặt chiều rộng tối đa của một phần tử. |
min-height | Đặt chiều cao tối thiểu của một phần tử. |
min-width | Đặt chiều rộng tối thiểu của một phần tử. |
width | Đặt chiều rộng của một phần tử. |
Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!
- Padding trong CSS
- Canh lề trong CSS
- Đường viền trong CSS
- Cách tạo hộp thông báo bên trong bài viết hiện đại
- Tất cả về Font trong CSS
- Màu sắc trong CSS
- Cách thiết lập màu nền, hình nền trong CSS
- CSS, Cascading Style Sheets là gì?
- Thẻ Marquee trong CSS
- Tạo Copyright đơn giản với hiệu ứng di chuột trong CSS
- Tạo nút CSS với hiệu ứng di chuột, hiện Icon Font Awesome
- Tạo hiệu ứng Preloader giống Tradevn.tech
- Tạo thanh tiến trình đơn giản bằng CSS
- Tạo hiệu ứng gõ chữ đơn giản bằng CSS
- Cách tạo vòng tròn Loading với hiệu ứng xoay vòng với CSS