Thuộc tính width trong CSS
Trần Thị Vân - 1327
- 11/07/2025
Chức năng của Thuộc tính width trong CSS
Thuộc tính width trong CSS dùng để quy định chiều rộng cho các phần tử HTML như thẻ div, img, p, input,... bằng đơn vị px, phần trăm, auto.
Cú pháp của Thuộc tính width trong CSS
width: giatri;
giatri: Giá trị để quy định chiều rộng cho các phần tử HTML (Ví dụ: 30px, 100px, auto, 50%, 100%,.....)
Ví dụ Thuộc tính width trong CSS
width:30%;
width:50%;
width:100%;
width:100px;
width:150px;
width:auto; Thẻ p;
width:auto; Thẻ span;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính width trong CSS</title>
<style>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%; height:auto; float: left; border:1px solid red; margin-bottom:10px}
div p {background:green; margin:0px; padding:15px; color:#fff}
div span {background:green; margin:0px; padding:15px; color:#fff;float:left}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính width trong CSS</h1>
<p>Dùng để quy định chiều rộng cho các phần tử HTML như thẻ div, img, p, input,... bằng đơn vị px, phần trăm, auto:</p>
<div><p style="width:30%">width:30%</p></div>
<div><p style="width:50%">width:50%</p></div>
<div><p style="width:100%">width:100%</p></div>
<div><p style="width:100px">width:100px</p></div>
<div><p style="width:150px">width:150px</p></div>
<div><p style="width:auto">width:auto; Thẻ p</p></div>
<div><span style="width:auto">width:auto; Thẻ span</span></div>
</body>
</html>
Cách sử dụng thuộc tính width trong CSS hiệu quả
Thuộc tính width phát huy hiệu quả nhất khi được sử dụng cùng các thuộc tính giới hạn kích thước và cách bố trí phù hợp. Thay vì cố định mọi phần tử bằng một giá trị duy nhất, nên lựa chọn cách thiết lập dựa trên nội dung, không gian hiển thị và khả năng thích ứng với nhiều kích thước màn hình.
Kết hợp width với max-width và min-width
width xác định kích thước mong muốn, trong khi max-width và min-width giúp kiểm soát giới hạn của phần tử. Cách kết hợp này đặc biệt hữu ích với các khối nội dung cần thay đổi kích thước theo không gian hiển thị.
.content {
width: 80%;
max-width: 900px;
min-width: 280px;
}
Trong ví dụ trên, phần tử có thể rộng theo tỷ lệ 80%, nhưng không vượt quá 900px và cũng không nhỏ hơn 280px. Nhờ đó, nội dung dễ duy trì kích thước hợp lý hơn thay vì bị cố định cứng.
Sử dụng width theo phần trăm trong bố cục
Đơn vị phần trăm phù hợp khi muốn chiều rộng của phần tử phụ thuộc vào phần tử chứa nó. Đây là lựa chọn thường gặp trong các bố cục có nhiều khu vực cần phân chia không gian linh hoạt.
.sidebar {
width: 30%;
}
.main-content {
width: 70%;
}
Cách thiết lập này giúp hai khu vực tự thay đổi theo chiều rộng của vùng chứa. Khi sử dụng nhiều phần tử cạnh nhau, cần tính cả padding, border và gap để tránh tổng kích thước vượt quá không gian thực tế.
Thiết lập width cho giao diện Responsive
Trong giao diện Responsive, không nên phụ thuộc hoàn toàn vào chiều rộng cố định bằng pixel. Có thể kết hợp tỷ lệ phần trăm với max-width để phần tử vừa linh hoạt trên màn hình nhỏ, vừa không bị kéo quá rộng trên màn hình lớn.
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
Với cách này, vùng nội dung chiếm phần lớn không gian trên thiết bị nhỏ nhưng vẫn được giới hạn khi hiển thị trên màn hình rộng. Đây là cách đơn giản để tạo bố cục dễ thích ứng mà không cần đặt quá nhiều giá trị kích thước riêng biệt.
Những lỗi thường gặp khi sử dụng width CSS
Một số vấn đề với width thường xuất hiện khi kích thước được đặt quá cứng hoặc không tính đến cấu trúc của phần tử chứa. Những lỗi này có thể khiến nội dung bị tràn, bố cục lệch hoặc xuất hiện thanh cuộn ngoài ý muốn.
- Đặt chiều rộng cố định quá lớn khiến phần tử vượt khỏi màn hình nhỏ.
- Sử dụng nhiều phần tử có tổng width vượt quá không gian của phần tử cha.
- Quên xem xét padding và border khi tính kích thước thực tế.
- Chỉ sử dụng width mà không có giới hạn phù hợp cho các khối nội dung lớn.
- Thiết lập width không phù hợp khiến bố cục khó thích ứng trên nhiều thiết bị.
Khi gặp tình trạng phần tử bị tràn, nên kiểm tra lại cả width, max-width, min-width, padding và border thay vì chỉ giảm chiều rộng của phần tử. Cách tiếp cận này giúp bố cục ổn định hơn và dễ bảo trì khi giao diện thay đổi.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính width trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
