jquery load（）

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（绿色）顶部之间的边距是none（这就是我想要的，没关系）。

但是，只要我在加载的html中添加内容，就会在页面顶部生成一个间隙：\

我认为这只是在css中设置一些行高支柱，但似乎无能为力。

任何想法我做错了什么？

Answer 1

加载新内容时，它会在文档中呈现，而这些新元素可能具有属性。在这种情况下，很可能Login具有保证金值。另一种选择是它有一个类或一些选择器，它被CSS文件拾取，并附加边距。

Easiet方式是右键单击Login元素，选择inspect，并使用web-dev / style分析元素的样式。

Answer 2

您所看到的是第一个内容溢出其容器的上边距（通常也称为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>

Answer 3

如果要保留内部内容的边距，则应设置溢出。看看当我们从overflow: auto移除.content > div行时会发生什么（尝试点击下面的代码示例后点击框）。

这是因为margin collapsing。内部内容上的边距与外部元素上的边距结合并应用于外部元素，即两个元素的两个边距折叠成单个边距。

document.querySelector('.content').addEventListener('click', (e) => {
  e.target.classList.toggle('overflow');
});

html,
body {
  margin: 0;
  padding: 0;
}

.outer {
  width: 200px;
  background: red;
}

.content > div {
  width: 100%;
  height: 300px;
  background: cadetblue;
  cursor: pointer;
}

.content > div.overflow {
  overflow: auto;
}

.test {
  margin: 10px;
  display: block;
}

<div class="outer">
  <div class="content">
    <div><span class="test">Test</span></div>
  </div>
</div>