How to set all element have 0 padding 0 margin on global styling

Question

I am working using nextjs, typescript, and scss. on global.scss there is *(asterisk selector) to set padding and margin to be zero(0) , but its not working

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

import "../styles/globals.scss";
import type { AppProps } from "next/app";
import "antd/dist/antd.css";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

using !important solves the issue, but why it should using !important? — Shyn, Nov 18 '21 at 06:21
as its name suggests, it adds more importance to that property., but I keep it as last option. Try my answer also whether it works? — Mohit Maroliya B17CS036, Nov 18 '21 at 06:26
@MohitMaroliyaB17CS036 not works, but if using !important its work — Shyn, Nov 18 '21 at 06:44
Dont use `!important` for this. Why? [Here's why](https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css). Use proper cascading instead. `*` is a very weak selector, it gets overwritten by literally _anything_ else like `h1`, `.foo` or any other selector that has a specitivity of 1 or more. What is specitivity? [Read this](https://stackoverflow.com/questions/4072365/understanding-css-selector-priority-specificity). — Fabian S., Nov 18 '21 at 07:42

score 0 · Accepted Answer · answered Nov 18 '21 at 06:12

0

try :

    * {
         box-sizing: border-box !important;
         padding: 0 !important;
         margin: 0 !important;
      }

answered Nov 18 '21 at 06:12

Mah Es

572
3
6

Dont use `!important` for this. Why? [Here's why](https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css). Use proper cascading instead. – Fabian S. Nov 18 '21 at 07:42
i just gave an answer specific to the question. question is not about whether its a good practice or not. @FabianS. – Mah Es Nov 18 '21 at 08:16
I know, i did not say your answer doesnt match the question cause _it does_. I just wanted to point out, that using `!important` this way is bad practise and can lead to huge problems later on. Should have said "like this" instead of "for this" that would have made that more clear. – Fabian S. Nov 18 '21 at 08:32

score 0 · Answer 2 · edited Nov 18 '21 at 07:39

0

Try

body {
  padding: 0;
  margin: 0;
}

edited Nov 18 '21 at 07:39

Fabian S.

2,370
2
25
33

answered Nov 18 '21 at 06:15

shen s

21
3

This will only reset the `padding` and `margin` on the `body` tag. [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) and [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) are not inherited in css so this will only affect the `body` tag. – Fabian S. Nov 18 '21 at 07:39

score 0 · Answer 3 · answered Nov 18 '21 at 07:48

Its because the selector's specitivity of * is less than h1,h2,h3,h4,h5,h6.

That means the h1,h2,h3,h4,h5,h6 selectors values will overwrite the values defined in *.

Yes, you could use !important to get around this by completely overruling any specitivity but that breaks the whole cascading feature (aka specitivity) of css and will haunt you at night. Why? Read this.

The proper solution on your issue would be to properly overwrite the margin on the h1,h2,h3,h4,h5,h6 selector by yourself in the cases you need it.

* {
  margin: 0;
  padding: 0;
}

h1,
h2 {
  /* this will overwrite the margin:0 and set the color to red from the * selector */
  margin-top: 10px;
  color: red;
}

.mycontentwrapper h1 {
  /* this will overwrite the margin:10px from the h1,h2 selector */
  margin-top: 0;
}

.mycontentwrapper h2 {
  /* this will overwrite the margin and color from the h1,h2 selector */
  color: blue;
  margin-top: 50px;
}

<div class="mycontentwrapper">
  <h1>Test</h1>
  <h2>Test 2</h2>
</div>

score -1 · Answer 4 · edited Nov 18 '21 at 07:39

-1

Try

html {
  box-sizing: border-box ;
  padding: 0px ;
  margin: 0px;
}

edited Nov 18 '21 at 07:39

Fabian S.

2,370
2
25
33

answered Nov 18 '21 at 06:22

Mohit Maroliya B17CS036

1,821
5
15

This will only reset the `padding` and `margin` on the `html` tag. [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) and [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) are not inherited in css so this will only affect the `html` tag. – Fabian S. Nov 18 '21 at 07:40

How to set all element have 0 padding 0 margin on global styling

4 Answers4