Question:
How to reset or change the marker indent in the list. By default, the marker padding is already set, is it possible to cancel it with padding or margin in some other way. I solved it with margin-left: -N px. Code below
html,
body {
margin: 0;
padding: 0;
}
.main-menu {
width: 250px;
margin: 10px;
padding: 0;
background: #3296ad;
list-style-position: inside;
}
.main-menu li {
padding: 10px 15px;
margin-bottom: -3px;
list-style-type: circle;
color: #ffffff;
border: 3px solid #b4e6e5;
}
.main-menu li a {
/* margin-left: -15px;*/
text-decoration: none;
color: #f5ffe7
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<link href="style.css">
</head>
<body>
<nav>
<ul class="main-menu">
<li><a href="#">Lorem ipsum.</a></li>
<li><a href="#">Beatae, enim.</a></li>
<li><a href="#">Perferendis, unde!</a></li>
<li><a href="#">Inventore, assumenda.</a></li>
<li><a href="#">Recusandae, quae?</a></li>
<li><a href="#">Iusto, quia.</a></li>
</ul>
</nav>
</body>
</html>Answer:
There is also this option before :
html,
body {
margin: 0;
padding: 0;
}
.main-menu {
width: 250px;
margin: 10px;
padding: 0;
background: #3296ad;
}
.main-menu li {
margin-bottom: -3px;
color: #ffffff;
border: 3px solid #b4e6e5;
padding: 10px 15px;
position: relative;
padding-left: 20px;
}
.main-menu li:before {
content: '';
list-style-type: circle;
display: list-item;
float: left;
width: 1px;
margin: 0 -10px 0 10px;
}
.main-menu li a {
text-decoration: none;
color: #f5ffe7;
}<nav>
<ul class="main-menu">
<li><a href="#">Lorem ipsum.</a></li>
<li><a href="#">Beatae, enim.</a></li>
<li><a href="#">Perferendis, unde!</a></li>
<li><a href="#">Inventore, assumenda.</a></li>
<li><a href="#">Recusandae, quae?</a></li>
<li><a href="#">Iusto, quia.</a></li>
</ul>
</nav>But also with a negative margin, which is a perfectly acceptable solution (just like your margin-left: -15px; ) !
Also from the same series as the negative indent is a {translateX(-15px); }