Chiều cao và chiều rộng trong CSS

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 heightvà 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ằng px, 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:

Đặ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ành none 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.

Tất cả các thuộc tính chiều rộng, chiều cao trong CSS

---

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!

---