Remove extra space around heading element - css

Question

I'm trying to remove ALL space around a <h2> element
I have this simple markup:
<div>
<h2>Count down</h2>
</div>
I tried to remove spacing with:
h2 {
margin: 0;
padding: 0;
line-height: 0;
}
But some white space remains. You can see it on this screen shot:
There's spacing both over and under (and it's not padding or margin). How can I get rid of that extra spacing?
EDIT: Here is a simple jsfiddle to illustrate. I want to remove the space colored light blue.

Answer 1

The inspector in the screenshot shows
.countdown h2 {
margin: 0 0 10px;
}
which equates to:
.countdown h2 {
margin-bottom: 10px;
}
That means you must have a styled h2 somewhere in your css.
Because the style is nested as .countdown h2, it will take precendent over just styling h2 by itself.
If you cannot delete it, and would rather not use !important to override it, you may be able to override the style like:
body .countdown h2 {
margin: 0;
}
This gives it three elements, making it more specific than the two in the inspector. See an example of how it works here: JS Fiddle
More on CSS precedence: W3 - The cascade

Answer 2

you have padding on your countdown class which surrounds your h2 of 40px as you made it global it will put padding on top bottom left and right at 40px to fix try this
.countdown { padding:0px 40px 0px 40px; }
if you mean the h2 has space at the bottom thats because you have a style on it putting margin of 10px at the bottom to remove just delete that style.
.countdown h2 { margin: 0 0 10px; }
if you dont want to delete it you can overide it by doing
h2 {
margin: 0px !Important;
padding: 0px;
line-height: 0;
}
you should not really use the !important unless really needed which in this case it is not.