19

I've got a list item that is being displayed on the webpage using the hover effect. Challenge i'm facing here is when i apply some border or background to the list item, it looks horrible because of the padding that is being generated automatically.

Look at this image please.

Anyone please help me to override it.

I already searched the forums but i only got how to turn it off from the console not to over ride it.

enter image description here

Community
  • 1
  • 1
Unknown User
  • 3,598
  • 9
  • 43
  • 81
  • How about simply ul { padding:0 } – Danield Nov 21 '13 at 08:52
  • 1
    Well I just added my above comment as an answer. – Danield Nov 21 '13 at 08:58
  • possible duplicate of [chrome : how to turn off user agent stylesheet settings?](http://stackoverflow.com/questions/18006356/chrome-how-to-turn-off-user-agent-stylesheet-settings) – givanse Apr 30 '14 at 05:43
  • For me, in Chrome, ul {padding:0; margin:0}, which is recommended here, doesn't override any of the user agent style rules, like margin-block-start, even with !important. You have to spell out the entire selector in all five cases. – David Spector Jul 26 '23 at 18:46

2 Answers2

30

What you are seeing there is a "user agent style" (it shows "user agent stylesheet" as source).
UA styles are boilerplate rules that are introduced by your browser to have some conformity across web pages. You can simply override it.

Style declarations can come from multiple places and have different precedence depending on the source (from lowest to highest)*:

Name       │  Source
───────────┼────────────────────
user agent │ Browser  
author     │ You (the content creator)  
User       │ end user (the person using your website)

Precedence │ Source                    
───────────┼────────────────────────────────────────────────────────────────────
Lowest   0 │ user agent styles => these are the styles you see in the screenshot
         1 │ User styles
         2 │ author CSS styles => beware CSS precedence rules (link below)!
         3 │ author inline styles
         4 │ author CSS styles with `!important`
         5 │ author inline styles with `!important`
Highest  6 │ User styles with `!important`

Since the styles in your screenshot are UA styles (lowest precedence) all you need is to declare a style rule in your css to overwrite them:

ul { padding:0 }

Side note: As you can see, User styles have highest precedence. So if a User would declare their own styles with !important, there is nothing you can do about it as author, you cannot overrule those styles. (Which makes sense, because as the end user I want to know I have the final say in how things look like in my browser).

* In real life, the cascading nature is more complex than the following list shows, but I didn't cover it for the sake of simplicity. If you are interested, take a look into CSS precendence.

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • you could overwrite an important style by using a more specific selector than the original – Pete Nov 21 '13 at 09:13
  • @Pete You are right. Also I didn't mention inline styles which have the highest precedence of all default author styles. However, you have to apply `!important` to the more specific rule as well, or otherwise it won't help. Also you cannot overrule important user styles by any means. I'm aware of the complexity of the matter, but I just wanted to keep it simple, since this already solves the OP's issue. – Christoph Nov 21 '13 at 11:07
  • @Christoph the article you linked is absolutely great – DevMoutarde Oct 15 '20 at 08:52
14

Just add the following style:

ul { padding:0 }

That will override the default style.

Danield
  • 121,619
  • 37
  • 226
  • 255
  • Thanks for this! I spent hours and hours trying to figure it out, good thing I tried Google and found this answer. haha :D – jehzlau Oct 29 '14 at 20:10