Thuộc tính chiều rộng CSS xác định chiều rộng của vùng nội dung của phần tử. Khu vực này là khoảng cách giữa đường viền, phần đệm và lề của phần tử. Hơn nữa, thuộc tính chiều rộng CSS với giá trị “ nội dung phù hợp ” sẽ điều chỉnh độ rộng của phần tử theo nội dung.
Nghiên cứu này sẽ giải thích thuộc tính chiều rộng CSS với giá trị phù hợp với nội dung.
Làm cách nào để sử dụng thuộc tính chiều rộng CSS với giá trị nội dung phù hợp?
Với mục đích sử dụng thuộc tính chiều rộng CSS với giá trị nội dung phù hợp, hãy xem cú pháp đã cho:
chiều rộng: phù hợp với nội dung
Ví dụ
Trong HTML, thêm ba phần tử div có cùng tên lớp “ hộp ” và ba lớp khác nhau “ màu-1 ”, “ màu-2 ', và ' màu-3 ', tương ứng. Thêm phần tử
bên trong mỗi div để thêm nội dung vào trang web:
< div lớp = 'hộp màu-1' >
< P > Chiều rộng CSS phù hợp với nội dung P >
div >
< div lớp = 'hộp màu-2' >
< P > Chào thế giới ! P >
div >
< div lớp = 'hộp màu-3' >
< P > Làm việc theo nhóm bắt đầu bằng cách xây dựng lòng tin. Chúng tôi là một nhóm làm việc vì một nhiệm vụ chung. P >
div >
Đây là đầu ra của mã HTML:
Cho đến nay, chúng ta đã thảo luận về trang HTML. Bây giờ, trong phần tiếp theo, chúng ta sẽ áp dụng các kiểu CSS khác nhau cho các phần tử HTML để làm cho chúng trông đẹp hơn. Trong ví dụ đang diễn ra, chúng tôi sẽ kiểm tra hành vi của “ chiều rộng ” tài sản có giá trị “ nội dung phù hợp ” trong CSS.
Phong cách 'hộp' div
.hộp {chiều rộng: phù hợp với nội dung;
chiều cao: 50px;
màu sắc: ma trắng;
phần đệm: 6px;
lề: 2px;
cỡ chữ: 18px;
}
Các ' .hộp ” đề cập đến hộp lớp div. Dưới đây là các thuộc tính được áp dụng cho nó:
-
- “ chiều rộng ” tài sản có giá trị “ nội dung phù hợp ” sử dụng không gian có sẵn, nhưng nó sẽ không vượt quá nội dung.
- “ Chiều cao ” là thuộc tính xác định chiều cao của phần tử.
- “ màu ” xác định màu phông chữ của phần tử.
- “ đệm ” thuộc tính tạo khoảng trống bên trong đường viền của phần tử hoặc xung quanh nội dung.
- “ lề ” xác định không gian xung quanh phần tử.
- “ cỡ chữ ” thuộc tính xác định kích thước phông chữ.
Div kiểu “màu-1”
.màu- 1 {màu nền: #00ABB3;
}
Các ' màu nền ” thuộc tính được đặt thành “ .color-1 ” div.
Div kiểu “màu-2”
.màu- 2 {màu nền: #083AA9;
}
Div kiểu “màu-3”
màu nền: #4C6793;
}
Có thể thấy rằng chiều rộng của phần tử được đặt bằng nội dung:
Thật tuyệt! Chúng tôi đã học thành công cách sử dụng CSS “ chiều rộng ” tài sản có giá trị “ nội dung phù hợp ”.
Phần kết luận
Thuộc tính chiều rộng CSS cho phép chúng tôi sử dụng một số giá trị. Các giá trị này ở dạng phần trăm, pixel hoặc nhiều hơn nữa. Để đặt nó theo nội dung, nút “ nội dung phù hợp ” giá trị có thể được thiết lập. Bài đăng này đã mô tả thuộc tính chiều rộng CSS với giá trị phù hợp với nội dung bằng một minh họa thực tế.