React中如何在创建按钮与底部成功提示消息间添加间距？

下面是几种简单有效的解决方式，帮你给按钮和成功提示消息添加间距：

方法1：给成功提示框添加上外边距 #

直接通过CSS给提示框设置顶部间距，或者利用CSS框架的内置类：

• 自定义CSS方式：

#success-message {
  margin-top: 1rem; /* 可根据需求调整数值，比如15px、20px */
}

• 若使用Bootstrap（从按钮的btn btn-primary类推测可能用到），直接给提示框加内置间距类：

<div className={`${successClass} mt-4`} id="success-message">
  You have created a new hat!
</div>

方法2：给表单添加底部外边距 #

如果不想修改提示框样式，也可以给上方的表单设置底部间距：

• 自定义CSS方式：

form {
  margin-bottom: 1rem;
}

• Bootstrap框架内置类方式：

<form className="mb-4">
  {/* 表单内部内容 */}
</form>

方法3：内联样式快速测试 #

临时调试时，可以直接用内联样式快速生效：

<div className={successClass} id="success-message" style={{ marginTop: '1rem' }}>
  You have created a new hat!
</div>

内容的提问来源于stack exchange，提问作者Natalie Tang