Margin issue with jquery load()

Question

I am loading html page inside a div with jquery. It does work fine.

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>

My issue is that if the loaded html has no content, the margin between the parent document body (white) and the top of the loaded html (green) is none (that's what I want, it's ok).

However as soon as I add content to the loaded html, a gap is generated at the top of the page :\

I thought it was all about setting some line-height prop in the css but it seems helpless.

Any ideas what I am doing wrong ?

most probably. Best would be to inspect via dev-tools in chrome/mozilla and see exactly the css rule causing the margin. — CodeAt30, Feb 02 '18 at 16:24
What you are seeing is the top margin of the first piece of content. If you give your container element a `padding` of that same amount, the margin space won't be used and the element will be pushed down in the green area. — Scott Marcus, Feb 02 '18 at 16:24
Thanks all, you are right. It's a child margin issue. Majid, if you put your comment in the answer field I will validate your answer. — Loic, Feb 02 '18 at 16:26
A non-zero margin is fine if you set the overflow, e.g. `overflow: auto`. — noahnu, Feb 02 '18 at 16:28
Possible duplicate of [How to disable margin-collapsing?](https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing) — noahnu, Feb 02 '18 at 16:42

score 0 · Answer 1 · answered Feb 02 '18 at 16:27

When you load new content it gets rendered in the document and those new elements might have properties. In this case, most probably the Login has a margin value. Another option is that it has a class or some selector that is being picked up by a CSS file which appends the margin to it.

Easiet way would be to right-click on the Login element, choose inspect, and analyze the style of the element with web-dev / style.

Scott Marcus · Accepted Answer · 2018-02-02T23:15:34.223

What you are seeing is the top margin of the first piece of content overflowing its container (also known more commonly as 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>

If you give your container element a padding of that same amount, the margin space of the body won't be used and the element will be pushed down in the green area.

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>

Or, you could set the top margin of the first piece of content to zero:

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>

Finally, you could set the overflow of the content area to auto but (although this seems to be the popular answer), I don't prefer this approach as you run the risk of unintended fitting of the content as the content changes and/or the container size changes. You give up a bit of sizing control:

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>

Thanks Scott for the highly detailed answer. It was good help. — Loic, Feb 02 '18 at 16:43

noahnu · Answer 3 · 2018-02-02T16:37:26.277

If you want to keep the margin on the inner content, you should set an overflow. Look what happens when we remove the overflow: auto line from .content > div (try clicking the box after running the code sample below).

This is because of margin collapsing. The margin on the inner content is combined with the margin on the outer element and applied on the outer element, i.e. two margins of the two elements are collapsed into a single margin.

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>

Margin issue with jquery load()

3 Answers3