如何设置margin-top与margin-bottom？弹窗上下边距不生效问题

你的问题出在弹窗内容容器的h-full属性上：这个属性让容器完全占满了父级flex容器的高度，再加上m-8时，垂直方向没有多余空间来展示margin，导致上下边距失效。

修复后的代码 #

直接去掉多余的嵌套容器和h-full，改用max-h-full限制高度，同时添加滚动处理避免内容溢出：

export function Modal() {
  return (
    <div className="fixed inset-0 z-[60] bg-opacity-25 backdrop-blur-sm flex justify-center items-center">
      <div className="bg-background border rounded-lg w-full max-w-4xl max-h-full m-8 overflow-auto">
        <h1>Hello</h1>
      </div>
    </div>
  );
}

关键调整点 #

• 移除内层多余的absolute inset-0 flex容器，外层已经是flex居中布局，无需重复嵌套
• 把h-full换成max-h-full：保证弹窗高度不超出屏幕，同时可根据内容自适应高度
• 添加overflow-auto：当弹窗内容过长时自动显示滚动条，避免内容溢出
• 可选添加max-w-4xl（或其他max-w-*类）：限制弹窗最大宽度，避免大屏上弹窗过宽影响阅读

内容的提问来源于stack exchange，提问作者Evan Ethans