javascript - 无法摆脱 html 中 div 下方和之后的白色间隙

Question

<分区>

Answer 1

这就是所谓的“ margin 崩溃”https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Parent and first/last child - If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

您需要删除 h3 上的上边距，它是该部分的第一个子级。

$(document).ready(function() {
  $(".dropdown > a").click(function() {
  	var $dropdownContent = $(this).siblings('.dropdown-content');
    
    $(this)
    	.closest("ul")
      .find("li.dropdown ul.dropdown-content")
      .not($dropdownContent)
      .slideUp(200);
      
    $dropdownContent.slideToggle(200);
  });
});

@font-face {
    font-family: AvantGarde Demi;
    src: url(AvantGarde Demi.woff);
}
@font-face {
    font-family: AvantGarde;
    src: url(AvantGarde.woff);
}
@font-face {
    font-family: ITC Avant Garde Gothic;
    src: url(ITC Avant Garde Gothic.woff);
}
/******************For Top Nav****************************/

.topnav {
    position: relative;
    top: -902px;
    background-color: rgba(0, 0, 0, 0.5);
    height: 89px;
    border-bottom: 3px solid #EF7440;
    /*overflow: hidden;*/
}
.topnav ul>li {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    width: 15%;
}
.topnav a {
    text-decoration: none;
    font-size: 17px;
    color: white;
    display: block;
}
/* dropdown menus hidden initially */

.topnav ul>li>ul {
    display: none;
    margin-top: 30px;
    width: 200px;
    padding: 0;
    position: absolute;
    background-color: #f76c38;
}
.topnav ul>li>ul>li {
    float: left;
    clear: left;
    display: block;
    text-align: left;
}
body {
    border: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
}
.header {
    position: relative;
    height: 769px;
}
.header-background {
    height: 769px;
    width: 100%;
}
.orange-bar {
    position: relative;
    padding-left: 150px;
    top: -430px;
    left: -160px;
}
.header h1 {
    padding-left: 110px;
    color: white;
    font-family: AvantGarde;
    text-align: center;
    font-size: 35px;
    left: -420px;
    letter-spacing: .24em;
    position: relative;
    top: -615px;
    font-family: "AvantGarde";
    text-transform: uppercase;
}
.header p {
    padding-left: 290px;
    text-align: center;
    padding-right: 210px;
    font-size: 22px;
    letter-spacing: .12em;
    font-family: "Adelle PE";
    color: white;
    position: relative;
    top: -700px;
}
.header h2 {
    font-family: "Adelle PE";
    font-style: italic;
    text-transform: uppercase;
    top: -490px;
    font-weight: normal;
    font-size: 21px;
    position: relative;
    margin-left: 630px;
    color: white;
    letter-spacing: 0.24em;
}
.header a {
    color: white;
    text-decoration: none;
}
#worldofnorthman {
    background-size: cover;
    background-image: url("our_story.png");
    /*width: 404px;*/
    
    height: 768px !important;
}
.login {
    display: inline;
    padding-left: 15px;
    letter-spacing: .25em;
    color: white;
    font-size: 11.433px;
    font-family: AvantGarde;
}
.login a {
    color: white;
    text-decoration: none;
}
.login a:hover {
    color: #fe5b1f;
    text-decoration: none;
}
.container {
    width: 100% !important;
}
li.insurance {
    padding-top: 30px !important;
}
li.our-story {
    padding-top: 30px !important;
}
li.login-signup {
    padding-top: 30px !important;
}
li.get-covered {
    margin-top: 15px;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
li.our-story {
    /*margin-right: 200px !important;*/
    font-family: AvantGarde;
    letter-spacing: .30em;
    color: white;
}
li.login-signup {
    font-style: italic;
    font-size: 12px;
    font-family: Adelle PE;
    letter-spacing: .30em;
    color: white;
}
li.get-covered {
    border-color: #EF7440;
    border-style: solid;
    color: white;
    letter-spacing: .30em;
    font-family: Adelle PE;
}
li.get-covered:hover {
    background-color: #EF7440;
}
li.insurance {
    margin-right: 80px;
    margin-left: 80px;
    color: white;
    font-family: AvantGarde;
    letter-spacing: .30em;
}
#adventure {p
    background-size: cover;
    background-image: url("https://s15.postimg.org/57rlzm6ij/insurance.png");
    /* width: 404px; */
    height: 768px !important;
}

#worldofnorthman {
    background-size: cover;
    background-image: url("https://s9.postimg.org/3vae4upan/our_story.png");
    /*width: 404px;*/
    height: 768px !important;
}
.container {
    width: 100% !important;
}
.catagories h3 {
    position: relative;
    top: 135px;
    font-size: 25px;
    font-weight: bold;
    color: #fe5b1f;
    letter-spacing: .24em;
    line-height: 1.187;
    text-align: center;
}
.catagories h3:after {
    content: "";
    height: 5px;
    width: 12%;
    background-color: #fe5b1f;
    position: absolute;
    bottom: -.8em;
    left: 50%;
    transform: translate(-50%);
}
#no-line {
    position: relative;
    top: 405px;
    font-family: AvantGarde;
    font-size: 25px;
    font-weight: bold;
    color: #fe5b1f;
    letter-spacing: .24em;
    text-align: center;
}
.catagories a {
    text-decoration: none;
    color: #fe5b1f;
    font-family: AvantGarde;
}

.catagories a:hover {
    text-decoration: none;
    color: #fe5b1f;
}

#no-line {
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script type="text/javascript" src="/js/lib/dummy.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <script type="text/javascript" src="https://ajax.googleapis.com;
    color: white;
    font-family: AvantGarde;
    letter-spacing: .30em;
}
  </style>

<script type=" text/javascript ">//<![CDATA[
window.onload=function(){
$(document).ready(function() {
  $(".dropdown>
        a ").click(function() {
        var $dropdownContent = $(this).siblings('.dropdown-content');

        $(this)
            .closest("ul")
            .find("li.dropdown ul.dropdown-content")
            .not($dropdownContent)
            .slideUp(200);

        $dropdownContent.slideToggle(200);
        });
        });

        } //]]>
    </script>


</head>

<body>
    <div class="header"> <img class="header-background" src="https://s30.postimg.org/3q4ox3s81/background-image-chrisdavenport.png">
        <div class="orange-bar">
            <img class="orange-bar-image" src="https://s9.postimg.org/sdrolfjan/orange-bar.png">
        </div>
        <div class="topnav">
            <ul>
                <li class="home"><img src="https://s2.postimg.org/nhr4xxqcp/northman_wordmark_CMYK.png"></li>
                <li class="dropdown" style="margin-left: 10%;margin-top: 1.7%;">
                    <a href="#"><b>INSURANCE</b> <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                    <ul class="dropdown-content" style="display: none;">
                        <li><a href="#"><i>INDIVIDUAL</i></a>
                        </li>
                        <li><a href="#"><i>CORPORATE</i></a>
                        </li>
                    </ul>
                </li>
                <li class="our-story">OUR STORY</li>
                <li class="login-signup">Log In | Sign up</li>
                <li class="get-covered" style="width: 10%;">GET <strong style="font-style:italic">COVERED</strong>
                </li>
            </ul>
        </div>
        <h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
    </div>
	
    <div class="catagories" id="catagories">
        <div class="container">
            <div class="row">
                <div id="adventure" class="col-lg-6">
                    <h3 id="no-line"><a href="#">INSURANCE</a> </h3>
                </div>
                <div id="worldofnorthman" class="col-lg-6">
                    <h3 id="no-line"><a href="#">OUR STORY</a> </h3>
                </div>
            </div>
        </div>
	</div>

    <script>
        // tell the embed parent frame the height of the content
        if (window.parent && window.parent.parent) {
            window.parent.parent.postMessage(["resultsFrame", {
                height: document.body.getBoundingClientRect().height,
                slug: "tne4zh8h"
            }], "*")
        }
    </script>

</body>
</html>