list-style-position
Controls the bullet (marker) position of list items. lspi places the bullet inside the content flow, while lspo places it outside.
Class List
| Class | CSS | Description |
|---|---|---|
lspi | list-style-position: inside | Places bullet inside content flow |
lspo | list-style-position: outside | Places bullet outside content (default) |
Visual Comparison
Compares the bullet position difference between inside and outside.
inside — lspi
- 불릿이 콘텐츠 안에 위치
- 텍스트와 같은 흐름
- 줄바꿈 시 불릿 아래로 텍스트 정렬
outside — lspo
- 불릿이 콘텐츠 바깥에 위치
- 기본값 (default)
- 줄바꿈 시 텍스트가 불릿과 정렬
Class Details
lspilist-style-position: inside
Places the bullet inside the list item content flow. The bullet is included inline in the first line of text, and wrapping text continues below the bullet.
<!-- Bullet inside content -->
<ul class="lsd lspi pl0">
<li>Bullet is on the same line as text</li>
<li>Clean alignment with padding-left: 0</li>
<li>Suitable for lists inside cards</li>
</ul>lspolist-style-position: outside
Default value. Places the bullet outside the list item content. Text aligns next to the bullet on wrap, providing better readability.
<!-- Bullet outside content (default) -->
<ul class="lsd lspo pl2rem">
<li>Bullet is positioned outside the text</li>
<li>Text aligns with bullet on line wrap</li>
<li>Suitable for document lists</li>
</ul>Tips & Notes
inside + padding-left combination
When using lspi, applying pl0 aligns the bullet neatly within the content area.