Question

I am having problems using CSS and margins. I have a list that the li has a margin-bottom: 10px; but i want to deactivate this margin inside the list because I’ve a sub-list. It’s a litle hard to explain, because English is not my main language, but you can check the example of what happens.

Thank you in advance.

Answer 1

What you have is a specificity problem. Your ‘general’ (#content-sidebar li) style is more specific than your specific styles.

Here are a few articles going into more detail about CSS specificity

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Anyhoo, is this the effect you are looking for?

http://jsfiddle.net/ueyd5/10/

#content-sidebar li {margin-bottom:10px;}
#content-sidebar .content-sidebar-box {background:blue}
#content-sidebar .content-sidebar-submenu {background:red;}
#content-sidebar  .content-sidebar-submenu li {margin-bottom: 0;}