Html 如何在不影响组件上页边距的情况下更改页面上页边距？

我正在使用React构建一个响应迅速的web开发组合。到目前为止，除了CSS的几个问题外，一切都相对简单。现在，我希望我的主页和联系人页面的顶部边距为20px，但每次我尝试调整它时，我的导航栏组件都会继承相同的边距，在顶部留下这个难看的间隙。由于它不包含在我应用更改的元素中，我不确定为什么我的导航栏的上边距正在调整。以下是相关的

//Home page styling

#homeContainer {
   margin-top: 10px;
   margin-left: 16%;
   margin-right: 10%;
   padding: 40px;
   border: 3px solid black;
    }

//Navbar styling 

.navContainer {
  margin-top: 0px;
}

这是我的导航栏组件：

const Navbar = () => {
  render()
  return (
    <div className="navContainer">
      <div style={{ background: Background }}>
        <ul className="navList">
          <li className="navName">Casey Cunningh</li>
          <li><img src={Profile} alt="project" className="navImage" /></li>
          <li><Link to='/' className="navLink">Home</Link></li>
          <li><Link to='/projects' className="navLink">Projects</Link></li>
          <li><Link to='/contact' className="navLink">Contact</Link></li>
          <div className="logoContainer">
            <li>
              <a href="https://github.com/caseyclin" target="_blank" rel="noopener noreferrer">
                <img src={Github} alt="gitHub" id="navLogo" /></a>
            </li>
            <li>
              <a href="https://www.linkedin.com/in/casey-clin-b670b5177/" target="_blank" rel="noopener noreferrer">
                <img src={Linkedin} alt="linkedIn" id="navLogo" /></a>
            </li>
          </div>
        </ul>
      </div>
    </div>
  )
}

const导航栏=（）=>{
render（）
返回(

凯西·坎宁

家
计划
接触





)
}

这是我的主页：

const Home = () => {
    render()
    return (
        <div>
            <div id="homeContainer">
                <h1 id="homeHeader">Hi! Im Casey</h1>
                <h5 id="homeTitle">FRONT END DEVELOPER</h5>
                <p style={{ marginRight: "10%" }}>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</p>
            </div>
        </

const Home=（）=>{
render（）
返回(
嗨！我是凯西
前端显影剂
《公共知识产权》是一种在印刷业和印刷业中广泛使用的技术或虚拟技术。它在15世纪就已经成为一种技术标准，但在过去五年中，它并没有成为一种技术，也没有成为一种新技术1960年，美国大学出版了一本关于电子技术的著作，这本书的主要内容是关于公共知识的著作，以及Aldus PageMaker juga memiliki Version Lorem等桌面出版的著作
这是由边距折叠引起的，我将使用
flexbox
来解决这个问题

/* @App.css */
.App {
  display: flex;
}

查看此链接以了解更多信息：
首先，我看不出您试图在哪里将
边距设置为
20px；
。第二：您能否提供一个屏幕截图，以便我们更好地了解问题所在？：）你不能使用填充吗？根据定义，边距应该是外部距离，填充内部距离。你所描述的听起来像是需要内部距离，我建议使用填充顶部