Log in

View Full Version : Heading - Can't see why there is a gap at the top


jhatter
11-23-2009, 01:14 PM
Hi,

I have copied and pasted some code below.

When I view it in a browser there is a gap/margin above the heading, but I can't figure out what is causing this. I know it's gonna be simple but for now I've gone code-blind!

<style>

body {
margin:0px; padding:0px;
background-color:#cccccc;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

.column2 {
float:left;
width:220px;
margin: 0px;
padding: 0px;
}

.column2 h3 {
font-size:12px;
line-height:20px;
text-indent:5px;
color:#ffffff;
background-color:#b71717;
margin-right:30px;
}

</style>

</head>

<body>

<div class="column2">
<h3>HEADING GOES HERE:</h3>
</div>

</body>
Schmoopy
11-23-2009, 01:18 PM
A link to the page would be useful to get a better idea of what it looks like.
coothead
11-23-2009, 01:42 PM
Hi there jhatter,

many elements have default margins and the h3 element is one of them.
So instead of...


.column2 h3 {
font-size:12px;
line-height:20px;
text-indent:5px;
color:#ffffff;
background-color:#b71717;
margin-right:30px;
}

...use...


.column2 h3 {
font-size:12px;
line-height:20px;
text-indent:5px;
color:#ffffff;
background-color:#b71717;
margin:0 30px 0 0;
}

coothead
jhatter
11-23-2009, 02:08 PM
Thanks Coothead - that did the trick!
coothead
11-23-2009, 02:12 PM
No problem, you're very welcome. ;)
coothead
11-30-2009, 11:06 PM
Hi there unic-dev,

If you don't require the default margins of certain elements then they must be, in your phraseology, nullified. :)
As this post referred to the h3 element, you may be mildly interested in the default values that Firefox sets for the group....


h1 {margin: .67em 0;}
h2 {margin: .83em 0;}
h3 {margin: 1em 0;}
h4 {margin: 1.33em 0;}
h5 {margin: 1.67em 0;}
h6 {margin: 2.33em 0;}

coothead