Valid CSS or Hack?

Question

Putting this at the top of your CSS file:

* { margin: 0; padding: 0; }

hack? or valid CSS? What does it do? and how portable to different browsers/versions?

Answer 1

This is valid CSS. It selects EVERY element and resets the default margins and paddings. The reason people use this is to make their site layout more consistent across different browsers/versions, as each browser has its own default stylesheet. If you don't use this declaration or specify a margin/padding for each element, each browser will use its own default margins/paddings for that element and the page will be rendered inconsistently across different browsers.

Answer 2

It's valid CSS, but technically it could be considered a hack.

Basically it's used to reset the margins and padding on every element in the HTML because different browsers sometimes have different defaults. Using this reset will ensure that all elements start from a common point.

Answer 3

According to http://css-tricks.com/margin-0-padding-0-no-longer-cool/

This is part of the “CSS Reset” theory.This eliminates all differences in padding and margin across browsers Its very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.

Answer 4

The star is known as the universal selector, and is valid CSS. All it does it apply the styles to all elements in the page. It should be used carefully, however. Personally, I haven't found great use for it. Resetting the margins and paddings of all elements is something you can do more specifically (and in my opinion better) with other elements, element groups, and classes.

See this page for details on browser support. (Note that it is seriously out of date, having been written in 2000; I would imagine you could expect full support in all popular browsers nowadays.)

The universal selector is supported in Internet Explorer 5.x for both Windows and Macintosh, as well as IE 4.5 for Mac, and also in Opera 3.6. It's also supported in the Netscape 6 Preview Release 1 on all the myriad platforms for which it's available, and in Preview Release 3 of Opera 4 for Windows.

Answer 5

It's both valid and a hack. However, it's not a browser specific one. The term for it is "css reset"

As tf111 explained, the idea is to get rid of the browser specific settings for margin and padding that are different across all browsers

Answer 6

This is:

• Valid CSS
• Not really a "hack"
• A bit of a kludge
• Probably not what you want anyway

* is the universal selector. In the CSS spec, the universal selector has a specificity of 0000, which means that every other selector has higher precedence. Thus, this is a way to "reset" all the margins in a way that any other rule would be able to override.

Keep in mind that this approach would render your lists a mess. Without margins and padding, the list items are no longer indented. Some rules really are beneficial in that they style things that normally aren't considered as needing styling.

The universal selector selects every single element on the page. Every little div, every little li, and so on. In fact, it even selects things that are not block-level elements, like a and span and head. In many cases, this is overkill, and it can be quite inefficient on large pages.

If you're looking for a way to reset the default styling on HTML, you're better off using something like Eric Meyer's Reset CSS. While the Reset CSS stylesheet is much more complex, it doesn't go overboard with selecting every single element. Otherwise, just zero out the margin and padding of each individual element that's bothering you. (I always zero out the padding and margin of body and h1 as soon as I start on a page.)

Answer 7

You sometimes see:

html * { margin: 0; padding: 0; }

or

body * { margin: 0; padding: 0; }

which have slightly different results in various browsers. Just something to be aware of.

Also, there are selective resets that don't include every HTML element - see this article comparing kinds of CSS reset.

It can't be a hack, because it is valid and standard CSS.