Margin top has no effect

Question

For the code below

import {
  TextField,
  Stack,
  Button,
  Box,
  Grid,
  SvgIcon,
  Typography,
  Divider,
  Link
} from "@mui/material";
// import IconGoogle from "../client/images/google.svg";

export default function Home() {
  return (
    <Grid container justifyContent="center" padding={20}>
      <Grid item>
        <Stack spacing={2} width={320}>
          <Typography component="label" variant="h5" alignSelf="center">
            Sign In
          </Typography>

          <Button variant="outlined" fullwidth>
            {/* <IconGoogle /> */}
            &nbsp; Sign in to Google
          </Button>
          <Divider> OR </Divider>
          <TextField variant="outlined" label="Email" fullwidth />
          <Stack>
            <TextField variant="outlined" label="Password" fullwidth />
            <Typography
              component="label"
              variant="subtitle1"
              sx={{ color: "gray", fontSize: 12 }}
            >
              Minimum 6 Character
            </Typography>
          </Stack>
          <Button variant="contained">Sign In</Button>

          <Link component="button" underline="none" sx={{ mt: 100 }}>
            Forgot Password
          </Link>
        </Stack>
      </Grid>
    </Grid>
  );
}

It gives the following screen

which I expect the red rectangle portion to be much larger, since I set sx={{ mt: 100 }}. Why it's not larger and how to rectify it?

Answer 1

If you use padding instead of margin, it does move the button down.

<Link component="button" underline="none" sx={{ pt: 100}}>
        Forgot Password
</Link>