Is there a way to increase the space between the number and the text of each <li>?
Yes there is a way to do this! We can use CSS to target the <li> elements and then apply some left padding to them. This will nudge the text to the right, away from the numbers. To learn more about how to change the look of our pages, check out our Learn CSS course.
Conversely, is there a way to decrease the space between the number (or marker) and the text of each <li>?
Negative values given to padding and border attributes don’t seem to work, while negative values for margin and position-related (e.g. left)* attributes shift the list item together with the number/marker.
*changed the spelling from “(i.e. left)” to “(e.g. left)”
There are 4 styles to change the position. left, right, top and bottom you can use.
That is right. My question was whether there is a way where we can reduce the space between the marker of a list item (li) element and the text (or the content) of the li element. As giving negative values to the left attribute, for example, shifts both the text/content of the li element and also shifts the marker of the li element, so then is there a way to move only the text/content of the li element, but not move the marker?
From inspecting the page code, I see that the browser inserts a ::marker element nested inside the li element and right after the opening <li> tag, but it seems that its margin (and/or position) can’t be changed.
Since the left and right propities are oppisets what do you think you would use to move it closer?
Well here’s what I tried:
I have this code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</body>
</html>This is what it displays (along with inspecting the code):
This is my first try to move the item1 and item2 texts closer to the disc markers:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
<style>
li {
position: relative;
left: -10px;
}
</style>
</body>
</html>This is the result (it shifts both the (item1 and item2) texts of the li and the disc maker to the left, but I want only the texts to move and the disc marker to remain in the same place as it was before):
Now my next try is to throw everything I know at the marker 
:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
<style>
li {
position: relative;
left: -10px;
}
::marker {
position: relative;
right: -10px;
}
li ::marker {
position: relative;
right: -10px;
}
li>::marker {
position: relative;
right: -10px;
}
li::marker {
position: relative;
right: -10px;
}
</style>
</body>
</html>But nothing changes:
Why doesn’t the marker move to the right?
Am I doing something wrong?
Does this code behave the same way for you?
Can there be something done so that the marker moves to the right (or the text moves to the left without the marker also moving to the left)? If so, what?
you may use text-indent property to add or deduct space between the marker and the text or other content you wished to include in the list
You can also type   before the text (not in angle brackets) to create a space. I was goofing around and tried it. It worked.
Hi I’m new here. I’ve gone through list and paragraph, but there is one problem I want to know. Is there a way to add indent for the paragraph to display in browser.
For example, like magazine there or book, there are always indent at the beginning.
CSS has a text-indent property that does what you want.
p {
text-indent: 1em;
}