The Universal Selector (*)

On This Page

Where the Default Spacing Comes From

Resetting Margin and Padding

Why the Heading Keeps Its 8px

What the Reset Removes That You Wanted

A Common Universal Rule for Sizing

When to Use the Universal Selector

What does the hiking page look like when every element loses its margin and its padding? A single rule can do that, because its selector, an asterisk, matches every element on the page.

The asterisk is called the universal selector. It matches any element, whatever its name, class or ID.

* {
  margin: 0;
  padding: 0;
}

Where the Default Spacing Comes From

Before you write any CSS, the browser already applies its own style sheet. That built-in style sheet gives headings, paragraphs, lists and the page body some space around them. On the hiking page, the browser reported these default values:

body   margin 8px on every side
h1     margin 21.44px above and below
p      margin 18px above and below (equal to its 18px font size)
ul     margin 16px above and below, padding 40px on the left

These defaults differ slightly between browsers. Many developers therefore remove them first and then add back exactly the spacing they want.

Resetting Margin and Padding

Here is the hiking page with the universal rule added. The rule for the heading's bottom margin is kept from the earlier lessons, and it is written before the universal rule on purpose.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hiking Guide</title>
  <style>
    h1 {
      color: darkgreen;
      margin-bottom: 8px;
    }

    * {
      margin: 0;
      padding: 0;
    }

    p {
      color: #333333;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>A Beginner's Hiking Guide</h1>
  <p>Pick a short trail for your first walk.</p>
  <p>Carry more water than you think you need.</p>
  <ul>
    <li>Water</li>
    <li>Map</li>
    <li>Rain jacket</li>
  </ul>
</body>
</html>

The browser applies the rule to the <html> element, the <body>, the heading, both paragraphs, the list and each list item. The page content now begins at the top left corner of the window, and the total height of the body falls from 187px to 141px.

The hiking page with the browser's default spacing, and the same page after the universal rule sets every margin and padding to 0.

Compare the two halves of the diagram. Every gap on the left comes from the browser's style sheet, and every one of them is gone on the right, except the 8px below the heading.

Why the Heading Keeps Its 8px

The universal rule comes after the h1 rule, yet the heading still has a bottom margin of 8px. The universal selector has a specificity of (0, 0, 0), because it contains no ID, no class and no element name. Even the plain element selector h1, at (0, 0, 1), outweighs it, so its position in the file does not matter.

Because of that zero weight, a universal rule only sets starting values. Any other rule that sets the same property replaces it.

What the Reset Removes That You Wanted

The reset also has a cost that is easy to miss. The list bullets disappear from the page. The browser draws each bullet just outside the left edge of its list item, and the 40px of left padding on the list was the space that held them. With the padding at 0 and the body margin at 0, the bullets are drawn outside the window. The text also touches the edge of the window, and the two paragraphs now have no space between them.

After a reset, you add back the spacing the design needs:

body {
  padding: 16px;
}

ul {
  padding-left: 24px;
}

p {
  margin-bottom: 12px;
}

With these rules, the text starts 16px from the window edge, each list item starts 24px further in, at 40px, and the bullets are visible again. Each paragraph has 12px of space below it.

A Common Universal Rule for Sizing

Many style sheets begin with a second universal rule that changes how the browser calculates the width and height of boxes:

*,
*::before,
*::after {
  box-sizing: border-box;
}

The parts *::before and *::after select the generated content that CSS can insert into elements, so the rule reaches that content too. The chapter on the box model explains box-sizing, and the chapter on pseudo-elements explains ::before and ::after. For now, it is enough to recognize the rule when you see it at the top of a style sheet.

When to Use the Universal Selector

Use it for a small number of starting values that truly apply to every element, such as the sizing rule above. Avoid putting colors, fonts or sizes in it. A declaration such as * { color: gray; } sets the color on every element directly, so a color set on a parent no longer passes down to its children by inheritance, and you must then repeat the color for each child.

Mark as Completed

Reading Progress

Vote for new content

On This Page

Where the Default Spacing Comes From

Resetting Margin and Padding

Why the Heading Keeps Its 8px

What the Reset Removes That You Wanted

A Common Universal Rule for Sizing

When to Use the Universal Selector