Margin confusion

HTML & CSS
1

So W3C states that the h1 element has default margins as followed:


h1 {
display: block;
font-size: 2em;
margin-before: 0.67em;
margin-after: 0.67em;
margin-start: 0;
margin-end: 0;
font-weight: bold; }

But when clear all default margins using the following code, my h1 tag still renders margins before and after. Why is this when all other elements have no margins under my css rule?


* {
margin: 0;
padding 0:
}
2

The default margins are supplied by browsers, and that rule you showed will definitely remove all margins. If you are talking about the slight space that remains above and below the element, you are probably dealing with line-height, which you can fiddle with if you need to.

3

first off:


h1 {
display: block;
font-size: 2em;
[COLOR="#FF0000"]margin-before: 0.67em;
margin-after: 0.67em;
margin-start: 0;
margin-end: 0;[/COLOR]
font-weight: bold; }

is not valid, it should be


h1 {
display: block;
font-size: 2em;
[COLOR="#FF0000"]
margin-left: 0.67em;
margin-right: 0.67em;
margin-top: 0;
margin-bottom: 0;[/COLOR]
font-weight: bold; }

as ralph said, you may be referring to the few pixels of space ( which are there to accommodate the ascenders and descenders of any font). but you could ad line-height:1; to mitigate this. We are also assuming your text is not centered ( in which case it may appear as if there is left/right margin, since H1 tags are BLOCK elements and as such extend 100% of the width of the container.

4

There’s also the possibility that this was copied from your real code in which case the punctuation is wrong. Try this:


* {
margin: 0;
padding[color=blue]:[/color] 0[color=blue];[/color]
}
5

NICE catch, RP! I should have spotter that typo as well.

6

The orignal code was taken from http://www.w3.org/TR/html-markup/h1.html. I know it is not valid, but when using an inspector or firebug, it shows those declarations. Also, it seems that when using those tools that the line-height and margins are highlighted using the same colors. That is where I was confused.

7

Yes, that’s how some browsers apply defaults. We have to stick with the standard declarations, though. :slight_smile: