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;
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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;

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

try :

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

CodePudding user response：

Try

body {
  padding: 0;
  margin: 0;
}

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try

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