What's the best way to override a user agent CSS stylesheet rule that gives unordered-lists a 1em margin?

Question

I\'m working on a web app that has a topBar similar to facebook\'s blue bar at the top. I have an unordered list within the div of that bar to list some items, like Inbox,

Answer 1

If You Are Able to Edit the Offending Stylesheet

If the user-agent stylesheet's style is causing problems for the browser it's supposed to fix, then you could try removing the offending style and testing that to ensure it doesn't have any unexpected adverse effects elsewhere.

If it doesn't, use the modified stylesheet. Fixing browser quirks is what these sheets are for - they fix issues, they aren't supposed to introduce new ones.

If You Are Not Able to Edit the Offending Stylesheet

If you're unable to edit the stylesheet that contains the offending line, you may consider using the !important keyword.

An example:

.override {
    border: 1px solid #000 !important;
}

.a_class {
    border: 2px solid red;
}

And the HTML:

content will have 2px red border
content will have 1px black border

Live example

Try to use !important only where you really have to - if you can reorganize your styles such that you don't need it, this would be preferable.