67

I have been looking at the CSS files for many websites like Facebook and Youtube.

In almost all of them I see this code:

* {
margin: 0;
padding: 0;
}

It is odd, as removing that block in chrome web developer tools doesn't affect the layout of the page.

What does this code mean, and when is it used and why?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
H Bellamy
  • 22,405
  • 23
  • 76
  • 114

9 Answers9

96

This is a common technique called a CSS reset. Different browsers use different default margins, causing sites to look different by margins. The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.

vcsjones
  • 138,677
  • 31
  • 291
  • 286
15

Asterisk (*) is a wildcard and means all elements.

* {
    margin: 0;
}

sets the margin of all elements to 0.

cheezone
  • 345
  • 1
  • 2
  • 9
Hauleth
  • 22,873
  • 4
  • 61
  • 112
10

* is a wildcard

It means apply those styles to all elements.

In this instance its setting the margin and padding on all elements to 0. This is common with Reset CSS files in order to default all native browser margin/padding on different elements to a common value.

Curtis
  • 101,612
  • 66
  • 270
  • 352
4

It resets the margin and padding of all HTML elements on the page to 0.

Some browsers may already do this by default, but it's always useful to try to reset everything manually, just in case.

In fact, many websites carry a reset.css (or similar) which when opened, you'll notice many rules to reset everything across every browser.

Oomta
  • 96
  • 6
  • No browser does this by default, as it would make HTML content illegible. Do you have any examples? – Andreas Bonini Jan 03 '12 at 22:31
  • I couldn't provide any example... but I know how many different browsers there are, forks of projects, mobile phone browsers, etc. "May" was the golden word there :) – Oomta Jan 04 '12 at 11:14
3

It's a wildcard and sets margin and padding to 0 for all HTML elements.

Try a more interesting one like:

* {
    font-size: 20pt;
}
home
  • 12,468
  • 5
  • 46
  • 54
3

In CSS there are some default styles applied to every web page in addition to your styles. These default styles define certain padding and margin values for elements like <h1>, <li>, <p>, <table>, etc. The annoying thing is that often you need to override these styles to get your page to look correctly, but not all browser manufacturers agree on the defaults. Often most developers find it easiest to reset all padding and margins to zero so everything behaves as expected. * is the wildcard selector and will match all element types. Essentially that style says to reset all padding/margins to zero for all elements hence removing any default stylings.

Pbk1303
  • 3,702
  • 2
  • 32
  • 47
chubbsondubs
  • 37,646
  • 24
  • 106
  • 138
2

* is a wild card, it selects all elements margin: 0; and padding: 0; set the margin and padding to 0 for the elements selected, which in this case would be all elements.

This is very handy for web development, I use it in every site I build.

  • 3
    It's worth mentioning that it is a technique worthy of debate. Many people advise against using the wild card selector for resets. But many people also argue against resets in general. Suffice it to say, it's a preference thing rather than a general best practice. – Greg Pettit Jan 03 '12 at 17:58
1

This is a common part of a general css reset. This basically sets all margin and padding of all (*) elements to 0. You are then free to add your own margin and padding values to each element as per your requirements.

Darwin Tech
  • 18,449
  • 38
  • 112
  • 187
0

Basically it is a wild card.try this to have a better view:

div * {
//code here
}
Hamid Mohammadi
  • 1