markwiens.net

Update:Judging by the lack of comments for this article, it is my impression that nobody is bothered by any other elements taking on an undesirable appearance. Yet I believe most or all of the other form elements could use their default margins and padding. So here are my thoughts about giving them back.

Introduced in CSS 2.0, the universal selector, displayed as an asterisk (*), assigns a property or properties to all elements in a document. For most of the block elements in my examples, the following properties have been given:

body {
    margin: 0;
    padding: 0;
}

It would be redundant to apply the previous styles to most of our document’s elements. Give all elements, or rather, do not give any element margins or padding. Then if a particular element needs a little padding here and another element needs a top margin there, it can be added as needed. This is where we use the universal selector to do the job.

* {
    margin: 0;
    padding: 0;
}

This is also a great way to reduce the style sheet’s filesize.

What? Problems?

Unfortunately, if you want to be nice to Mozilla-based browsers, you can’t get away with just using the universal selector to set margins and padding to zero. When using form elements, <select>s and <option>s in particular, you must put back a default browser style. I looked through the forms.css file included in Mozilla’s Firefox browser and found the following style:

select > option {
    padding: 0 5px 0 3px;
}

So far, this has been the only “glitch” in using the universal selector to zero out margins and padding. If anyone else finds other elements affected, please let me know. And if I discover any affected elements, I will be sure to let you know.