remove padding from element

Hi All. I'm trying to edit my CSS to remove the top padding from a particular element on my page. After inspecting the culprit element (using Chrome-->Inspect Element), I see that it has a class of .content-area and a top-padding of 72px. Here is the relevant CSS info yielded by inspect element:

.content-area, .content-sidebar {
padding-top: 72px;
}

However, when I insert the following into my style.css:

.content-area{
padding-top: 0px;
}

the padding remains. Any thoughts on what I'm doing wrong, or how to resolve?

 

Nevermind. I think I need to investigate media queries some more (the culprit css is enclosed in a media query).

 

Or You can use !important to force new value
eg : padding-top: 0 !important;

 

From Mozilla Developers' Network:

I wouldn't even allow that much slack. Just never ever, period.

cheers,

gary

 

IF what's decalared is EXACTLY this:

.content-area, .content-sidebar {
padding-top: 72px;
}

Why not just change it to this?

.content-sidebar {
padding-top: 72px;
}

If you don't want content-area doing it?

 

Replace to this:
.content-area{
padding-top: 0px !important;
}

www.h2theme.com

 

That exactly what I was thinking of, Deathshadow, the:

.content-area{
Padding-top: 0px;
}

Should work just fine, but I’m guessing that Cag8f never removed it from the first selector, so like Deathshadow said just remover the “.content-area” from the selector.

 

It's kind-of why I was laughing at the other respondents -- who all seem to think "throwing more code at it" and dicking around with crap like !important instead of simply removing the offending selector.

Seems to be the mentality everyone has about everything right now, there's a problem just throw more code at it and blindly hope it works. ESPECIALLY when the easiest answer is to actually remove code instead.

 

I MOSTLY agree with you -- and the "usage cases" in the part you quoted just prove what crap Frameworks like YUI or ExtJS are, as they might FORCE you to use it.

BUT, there is ONE place it's invaluable -- client side user.css to override crappy garbage CSS that 'designers' who know jack **** about accessibility vomit up and call a website, that as a visitor you pretty much have to override to even use the site.

See the user.css I have Opera (or FF's userContent.css) for websites where the dipshit know-nothing PSD jockey style designer crapped out PX metric fonts with goofy illegible webfonts. (aka the majority of vBull, phpBB and Xenforo skins)

* { font-size:100% !important; line-height:150% !important; font-family:arial,helvetica,sans-serif !important; }
body { font-size:85% !important; line-height:150% !important; }
code, pre, tt { font-family:consolas,monospace !important; }

Code (markup):

When using user.css in your browser to bend poorly written websites over your knee and make them accessible, !important is the yard long wood paddle with the word "redemption" burned into it.

But yeah, using it in a website's CSS? that's most likely just bad code and poor planning.

 

Agreed. The author has no business nor need to ever use the !important whatsit. If he does, he's already screwed the pooch.

The user does.

cheers,

gary