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 ?

Answer 1

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.

Answer 2

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> 

Answer 3

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, ie 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>