javascript - jquery load() 的 margin 问题

Question

我正在使用 jquery 在 div 中加载 html 页面。它确实工作正常。

var loginBtn = $("#loginBtn");
    var loginPage = $("#login");
    
    var submitBtn = $("#submitBtn");
    var submitPage = $("#submit");
    
    var checkBtn = $("#checkBtn");
    var checkPage = $("#check");
    
    loginPage.load( "login.html" );
    submitPage.load( "submitPoints.html" );
    checkPage.load( "checkPoints.html" );

body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: white;
}

#mainFrame {
    width: 100%;
    height: 300px;
    background-color:cadetblue;
    padding-top: 0;
    margin-top: 0px;
    position: relative;
}

<div id="mainFrame">
      <div id="login"></div>
      <div id="check"></div>
      <div id="submit"></div>      
  </div>

我的问题是，如果加载的 html 没有内容，则父文档正文(白色)和加载的 html 顶部(绿色)之间的边距没有(这就是我想要的，没关系)。

但是，一旦我将内容添加到加载的 html 中，页面顶部就会生成一个空白:\

我以为都是在css中设置一些line-height prop，但似乎无能为力。

知道我做错了什么吗？

Answer 1

您看到的是溢出其容器的第一段内容的上边距(通常也称为 margin collapsing ):

body {
  background:yellow;
}

#container {
  background:green;
  height:300px;
}

<div id="container">
  <h1>I have a top margin of 1em by default that is overflowing into the body.</h1>
</div>

如果你给你的容器元素一个相同数量的 padding，body 的边距空间将不会被使用，元素将被向下推到绿地。

body {
  background:yellow;
}

#container {
  background:green;
  height:300px;
  padding:1em;
}

<div id="container">
  <h1>I have a top margin of 1em by default that is now contained within my parent.</h1>
</div>

或者，您可以将第一个内容的上边距设置为零:

body {
  background:yellow;
}

#container {
  background:green;
  height:300px;
}

#container > h1:first-child { margin-top:0; }

<div id="container">
  <h1>My top margin has been set to zero.</h1>
</div>

最后，您可以将内容区域的溢出设置为 auto 但是(尽管这似乎是流行的答案)，我不喜欢这种方法，因为您冒着意外调整的风险内容随着内容的变化和/或容器大小的变化而变化。您放弃了一些尺寸控制:

body {
  background:yellow;
}

#container {
  background:green;
  height:300px;
  overflow:auto;
}

<div id="container">
  <h1>The content area has had its overflow set to auto.</h1>
</div>