CSS list-style-position property
The list-style-position property in CSS is used to control the positioning of the marker (bullet or number) relative to the content of list items. This property affects both ordered lists (<ol>) and unordered lists (<ul>).
Syntax
selector {
list-style-position: position;
}
selector: The element to which you want to apply the list style (e.g.,ul,ol).position: Specifies the position of the list item marker.
Values
The list-style-position property accepts the following values:
inside:- Description: Positions the list item marker inside the content area of the list item. This means the marker is part of the list item's box, and it affects the flow of text within the list item.
- Effect: When using
inside, the marker will be positioned such that it is contained within the padding and border of the list item. This can result in text being indented to the right of the marker.
outside:- Description: Positions the list item marker outside the content area of the list item. This means the marker is positioned in the margin area of the list item, and it does not affect the flow of the text within the list item.
- Effect: When using
outside, the marker will be placed in the margin area, making the content of the list item align with the left edge of the container, regardless of the marker.
Examples
Basic Usage
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Style Position Example</title>
<style>
ul.inside {
list-style-type: disc;
list-style-position: inside;
margin: 0;
padding: 0;
border: 1px solid #ccc;
}
ul.outside {
list-style-type: disc;
list-style-position: outside;
margin: 0;
padding: 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<ul class="inside">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="outside">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>
Explanation:
.insideclass:- Uses
list-style-position: inside;, which places the marker inside the content area. The text of the list item is indented to accommodate the marker.
- Uses
.outsideclass:- Uses
list-style-position: outside;, which places the marker outside the content area. The text of the list item aligns with the left edge of the container, and the marker is positioned in the margin.
- Uses
Important Points
Effect on Text Alignment:
inside: The text of the list item is indented to the right to make space for the marker.outside: The text aligns with the left edge of the container, and the marker is positioned in the margin, not affecting the text's alignment.
Default Behavior:
- The default value for
list-style-positionisoutside, which is the typical behavior for most browsers and list styles.
- The default value for
Interaction with
list-style-type:- The
list-style-positionproperty works in conjunction withlist-style-type. Changing the type of marker (list-style-type) will affect the appearance of the marker regardless of the position.
- The
Browser Compatibility:
list-style-positionis well-supported across modern browsers, ensuring consistent positioning of list markers.