Why does the * work?

Why does using the * selector work on margins and padding

[Nouturns]

Greetings,

I have found that by using the this style at the begining of my style sheet my page resolves well aligned in many different browsers but if I leave it out I have to compensate in the style for div spacing problems.

* {
margin: 0;
padding: 0;
}

Why does this work and where is if documented?

If I put the same style in the html or body style it does not work the same way.

Thanks,
Nouturns

[Fotiman]

Welcome to WebmasterWorld! This is defined in the CSS specification [w3.org]. * is the Universal Selector and matches ANY element. It's like a wildcard. If you have a rule like this:

* { /* ... */ }

That will match every element in your document, while if you apply the style like this:

html, body { /* ... */ }

that will match ONLY the html and body elements (thus, child elements of body might still have different default padding/margin).

[swa66]

That code fragments sets *all* margins and paddings to zero, on all elements in your html.
It has the lowest possible specificity so it can't override anything but the defaults of the browser itself.

The * is the "universal selector":
[w3.org...]

[Nouturns]

Thanks Fotiman,

So an old DOS command finds its way to style sheets.

Well like I said...it works.

Sometimes if I can't get things to space and align right I throw in an empty div with an inline clear both style but with the * I at least can start the page at 0.

Regards,
Nouturns

[Fotiman]

You might also want to research "reset style sheets". Basically, the notion is that you want to "reset" the browser defaults to your own defaults.

[Nouturns]

I certainly like the idea of always starting a page in all browsers at the same place.

I was starting my style sheets with something like this...

h1, h2, h3, p, ul {
padding: 0;
margin: 0;
}

Now using the * selector to set the page to zero is just easier.

Every browser I have tested this in it works.

Nouturns

[simonuk]

There is a growing debate about whether you should use the global reset, the yahoo style reset or simply resetting just the elements you use.

Each has its own pro's and con's. Becoming aware of the cons for each would give you a better understanding of best choice for you.

I personally use the * reset because I know everything is reset to 0 so for me bug fixing becomes easier. I like the idea of the yahoo reset but I might miss something that I otherwise wouldn't have.

Each to their own but I would strongly urge you to research all options and then form an opinion.