如何让大文本与两个图标横向排列且不产生额外边距？

问题根源 #

• 原生h1标签自带浏览器默认的上下外边距（margin），当字号放大到200px时，这个默认边距会被等比例放大，直接导致文本上下出现巨大空白。
• 两个并列的Stack组件在固定高度的Paper中会各自占据垂直空间，加上默认布局逻辑，使得数字区域被挤到卡片中部，无法实现紧凑排布。

解决方案 #

1. 清除h1的默认外边距：直接给h1设置margin: 0，彻底消除隐形边距。
2. 整合布局结构：将两个子Stack放到一个垂直方向的父Stack中，通过父Stack的gap属性精准控制上下内容的间距，同时保持整体水平居中。
3. 对齐图标与文本：给包含图标的横向Stack设置alignItems: 'baseline'，让图标和大字号文本的基线对齐，实现更紧凑的视觉贴合效果。

修改后的代码 #

<Paper elevation={3} sx={{ backgroundColor: "#00acec", height: '400px', width: '100%', display: 'flex', alignItems: 'center' }}>
  <Stack direction='column' justifyContent='center' alignItems='center' gap={1}>
    <Typography variant='overline' sx={{ color: 'white' }}>
      Your Amount
    </Typography>
    <Stack direction='row' alignItems='baseline' gap={1}>
      <IconAdd />
      <Box>
        <h1 style={{ color: 'white', fontSize: '200px', margin: 0 }}>$15</h1>
      </Box>
      <IconAdd />
    </Stack>
  </Stack>
</Paper>

额外优化提示 #

• 如果改用Material UI的Typography替代原生h1，可以直接通过sx={{ margin: 0, fontSize: '200px' }}控制样式，完全规避浏览器默认样式的干扰。
• 调整父Stack的gap值（比如改为0.5或2），可以进一步微调"Your Amount"和数字区域的垂直间距，完全匹配参考图的紧凑效果。

内容的提问来源于stack exchange，提问作者Gregory Duke