Thuộc tính list-style-position trong CSS
Bùi Tấn Lực - 834
- 12/10/2025
Chức năng của Thuộc tính list-style-position trong CSS
Thuộc tính list-style-position trong CSS dùng để quy định vị trí đặt ký tự đầu dòng của thẻ li, ký tự nằm trong hoặc ngoài nội dung thẻ li.
Cú pháp của Thuộc tính list-style-position trong CSS
list-style-position: giatri;
giatri: Giá trị để quy định vị trí đặt ký tự đầu dòng của thẻ li (Ví dụ: inside, outside)
Các giá trị của Thuộc tính list-style-position trong CSS
outside: Mặc định, đặt dấu đầu dòng bên ngoài nội dung của thẻ li.
inside: Đặt dấu đầu dòng bên trong nội dung của thẻ li.
Code Thuộc tính list-style-position trong CSS
#inside li{list-style-position: inside;}
#outside li{list-style-position: outside;}
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính list-style-position trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul{background: #ddd;}
#inside li{list-style-position: inside;}
#outside li{list-style-position: outside;}
</style>
</head>
<body>
<h1>Code Thuộc tính list-style-position trong CSS</h1>
<p>Dùng để quy định vị trí đặt ký tự đầu dòng của thẻ li, ký tự nằm trong hoặc ngoài nội dung thẻ li:</p>
<ul>
<li>Không sử dụng list-style-position</li>
<li>Không sử dụng list-style-position</li>
<li>Không sử dụng list-style-position</li>
</ul>
<ul id="inside">
<li>list-style-position: inside;</li>
<li>list-style-position: inside;</li>
<li>list-style-position: inside;</li>
</ul>
<ul id="outside">
<li>list-style-position: outside;</li>
<li>list-style-position: outside;</li>
<li>list-style-position: outside;</li>
</ul>
</body>
</html>
Khi nào nên sử dụng list-style-position inside và outside trong CSS?
Việc chọn inside hay outside không chỉ ảnh hưởng đến vị trí của dấu đầu dòng mà còn thay đổi cách nội dung danh sách được căn chỉnh. Hãy lựa chọn dựa trên bố cục thực tế thay vì chỉ dựa vào thói quen sử dụng.
Khi nào nên sử dụng list-style-position: inside?
inside phù hợp khi muốn dấu đầu dòng nằm cùng vùng nội dung của mỗi mục danh sách. Cách này thường hữu ích với các danh sách có nội dung ngắn, bố cục gọn hoặc khi muốn toàn bộ mục được giới hạn trong cùng một vùng hiển thị.
Đặc biệt, inside có thể giúp danh sách trông liền mạch hơn khi đặt trong một khu vực có nền, đường viền hoặc bố cục cần kiểm soát kích thước chặt chẽ.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<style>
ul {
list-style-position: inside;
}
</style>
Khi nào nên sử dụng list-style-position: outside?
outside thích hợp khi muốn dấu đầu dòng nằm bên ngoài phần nội dung của mục danh sách. Đây thường là lựa chọn tự nhiên cho các danh sách văn bản, đặc biệt khi mỗi mục có nhiều dòng và cần giữ phần chữ thẳng hàng.
Với các đoạn nội dung dài, cách này giúp những dòng tiếp theo không bị bắt đầu cùng vị trí với dấu đầu dòng, nhờ đó người đọc dễ nhận biết phạm vi của từng mục hơn.
<ul>
<li>CSS giúp kiểm soát màu sắc, khoảng cách và bố cục của thành phần trên trang web.</li>
<li>JavaScript bổ sung khả năng tương tác và xử lý hành vi cho trang web.</li>
</ul>
<style>
ul {
list-style-position: outside;
}
</style>
So sánh cách hiển thị inside và outside
Điểm khác biệt chính nằm ở vị trí của marker so với nội dung của mục danh sách. Với inside, marker được đặt vào khu vực nội dung; với outside, marker nằm bên ngoài khu vực đó.
| Giá trị | Vị trí marker | Phù hợp |
|---|---|---|
| inside | Nằm trong vùng nội dung của mục | Danh sách ngắn, bố cục gọn |
| outside | Nằm bên ngoài vùng nội dung | Danh sách văn bản, nội dung nhiều dòng |
Nếu ưu tiên bố cục gọn và muốn marker nằm trong phạm vi hiển thị của mục, có thể chọn inside. Nếu ưu tiên khả năng đọc và muốn phần văn bản giữ cách căn chỉnh rõ ràng, outside thường là lựa chọn phù hợp hơn.
Những lưu ý khi sử dụng list-style-position
Không nên xem inside và outside là hai giá trị chỉ khác nhau về khoảng cách. Vị trí marker có thể làm thay đổi cảm nhận về cấu trúc của cả danh sách, nhất là khi mục chứa nhiều dòng hoặc được kết hợp với các thuộc tính liên quan đến khoảng cách và kiểu danh sách.
Khi thiết kế giao diện thực tế, nên kiểm tra danh sách ở cả nội dung ngắn và dài. Một thiết lập nhìn cân đối với một dòng chữ có thể trở nên khó đọc khi mục danh sách xuống nhiều dòng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính list-style-position 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 *
