Как обнулить отступ маркера в списке?

#html #css

Как обнулить или изменить отступ маркера в списке. По умолчанию отступ маркера уже
задан, возможно ли его отменить с помощью padding или margin другим способом. Я решил
через margin-left: -N px. Код ниже



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
}



	
	
	


	

		

			
Lorem ipsum.
			
Beatae, enim.
			
Perferendis, unde!
			
Inventore, assumenda.
			
Recusandae, quae?
			
Iusto, quia.
		
	
	





    

Ответы

Ответ 1

Есть еще такой вариант 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;   
}

  

    
Lorem ipsum.
    
Beatae, enim.
    
Perferendis, unde!
    
Inventore, assumenda.
    
Recusandae, quae?
    
Iusto, quia.
  





Но тоже с отрицательным отступом, решение которое вполне приемлемое (как и Ваш margin-left:
-15px;) !

Также из той серии, что и отрицательный отступ - это a {translateX(-15px); }