What's the purpose of these CSS rules?

Question

so I have been trying to find out for myself what the following code actually does to everyting, but I just haven't been able to fully understand.

/*Global Style*/
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

I copied it from a video and so it didn't really explain it all to me. If you can explain this code to me, I would highly appreciate it!

@Sheri I don't agree. OP isn't asking "What do `*` and `::before`, `::after` do?" - Even if you knew what the `*` and pseudo `::after` and `::before` did, the purpose of this snippet isn't obvious. I think this question is valid and useful to other readers. — Tyler Roper, Nov 21 '19 at 18:52
When searching for other CSS resets, some decent ones use something closer to `*{ margin: 0; padding: 0; box-sizing: inherit; } *::before, *::after{ box-sizing: inherit; }`, i.e. no `margin` and `padding` changed on these pseudo-elements. I can’t find any reference that a default margin or padding is applied on `::before` and `::after` elements, whether de-facto applied by some browser or required by spec. I assume, in _this_ instance, these properties are just combined into the same selector list to save a few bytes, and for no other reason. — Sebastian Simon, May 31 '21 at 03:54

MTBthePRO · Answer 1 · 2019-11-21T19:01:29.837

* is a global selector for all elements in an HTML file.

*::before inserts something before the content has selected

*::after inserts something after the content has selected

To answer your question, all the elements in the HTML will have 0 padding, 0 margins and box-sizing: inherit

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

Running example. Hopefully it made sense.

Reference: https://www.w3schools.com/cssref/sel_after.asp

Reference: https://www.w3schools.com/cssref/sel_before.asp

p::after { 
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

p::before { 
  content: " - Remember this";
  background-color: pink;
  color: red;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

</body>
</html>

Adding to this, everything together means that you apply these rules to all elements (`*`) and any elements they may generate before or after they're created (`:before` and `:after`) — , Nov 21 '19 at 18:55

score 2 · Answer 2 · edited May 31 '21 at 03:48

It's to nullify standard distances that are given from HTML standards.

<p> will, as an example, automatically give a margin above and below, and body have a padding per standard. As a graphic designer, I curse that and wants to begin from scratch, building elements up from nothing, instead of having to override every single element.

box-sizing is a little harder to explain, but box-sizing: border-box should, IMHO, be the standard. It means that padding is counted into the width/height of an element. Normally, if you got width: 100px and padding: 10px, the elements width is (100+10+10=) 120 pixels, but with box-sizing: border-box, the width is 100 pixels. inherit inherits the same value as the parent element, so if body has, in another declaration, box-sizing: border-box, all other elements will share the same value, unless otherwise stated.

Tyler Roper · Accepted Answer · 2019-11-21T19:21:01.693

This snippet has a few purposes, mostly just overriding/resetting some default styling. The * selector applies these values to every element on the page, and the ::before/::after make sure it also applies to any pseudo-elements.

Specifically...

It removes all padding and margin from elements that have them applied by default. For example, <ul> elements:

<ul><li>I have a margin</li></ul>

* { margin: 0; padding: 0; }

<ul><li>I don't!</li></ul>

It makes all pseudo-elements (::before and ::after) inherit their parent's box-sizing, as opposed to always using content-box. This determines if properties like padding are applied inwards (maintaining element width) or outwards (adding to the element width).

div { box-sizing: border-box; }
div::after {
  display: inline-block;
  content: "140px width";
  width: 100px;
  padding: 20px;
  background: red;
}

The element below adds its 40px of padding to it's 100px width, despite its parent using box-sizing: border-box:
<div></div>

*::after { box-sizing: inherit; }

div {
  box-sizing: border-box;
}

div::after {
  display: inline-block;
  content: "100px width";
  width: 100px;
  padding: 20px;
  background: red;
}

The element below maintains its width of 100px, despite the 40px of padding, becuase it inherits its parent's box-sizing: border-box
<div></div>

References

What's the purpose of these CSS rules?

3 Answers3