CODEWITHSUNDEEP
htmlcss
Dylan Klomparens
Dylan Klomparens

Reputation: 2932

Change HTML list margin with CSS

I would like to reduce the margin size between sub-bullets. An example is marked below in red. How can I accomplish this using CSS?

Margin change

Upvotes: 2

Views: 2937

Answers (3)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

It can be done by CSS:

ul li ul {margin-left: 10px;}

Demo: Fiddle

Upvotes: 5

user1721135
user1721135

Reputation: 7092

hi those are the default margins for lists, best, reset all margins then set as you wish like:

div, li, ul, img, body, html {margin:0px;padding:0px;}

after reset set as you like:

li {margin-left:10px;}

this will work for all your li elements, if nested the next list item will also be 10px away from the previous. Margin means space between an element and the next, so if you set a margin on li it will apply on every li and if nested it will look loke a stair, if thats what youre after, if you only want a margin for first level li, but not for second add this as well:

li li {margin:0px;}

Upvotes: 0

Mark
Mark

Reputation: 6855

there are several methods do do it:

ul ul {margin-left: 10px;}

or

ul li ul {margin-left: 10px;}

or 

ul ul li {margin-left: 10px;}

Upvotes: 1

Related Questions