Question

我尝试搜索并使用我在其他地方找到的代码：

余量：0像素;

，但它仍无法解决我在文件的 divs 之间创建的GAP问题。这是代码：[第一个是Jquery，第二个是CSS，最后一个是正文。]

jQuery(document).ready(function(){
	var navOffset = jQuery(".nav").offset().top;

	jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
	jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());

	jQuery(window).scroll(function(){

		var scrollPos = jQuery(window).scrollTop();

		if(scrollPos >= navOffset){
			jQuery(".nav").addClass("fixed");
		}
		else{
			jQuery(".nav").removeClass("fixed");
		}
	});
});

body, html {
                height: 100%;
                background-color:#404040;
                margin:0px;
        }
        .parallax {
            background-image: url('images/bg.jpg');
            height: 100%;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            font-size:0;
            margin-bottom:0px;
        }
        .parallax1 {
            background-image: url('images/bg.jpg');
            height: 46%;
            font-size:0;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        ul.header{
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            width:100%;
            top:0;            
            display: inline-block;
            text-align:center;
            background-color: #0d0d0d;
        }
        .nav{
            z-index:999;
        }
        .navlink {
            display: inline-block
        }
        .fixed{
            position: fixed;
            top:0;
            width:100%;
            background-color:#222422;
        }
        .nav-placeholder{
            margin:0 0 40px 0;
        }
        .navlink a{
            font-family: caviar;
            display: block;
            color: #f3f3f3;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size:15pt;
        }
        .navlink a:hover{
            background-color: #f1f1f1;
            color:#0d0d0d;
            transition-duration: 0.4s;
        }
        .caption {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            text-align: center;
            color: #000;
        }
        .caption span.border {
            background-color: #111;
            color: #fff;
            padding: 18px;
            font-size: 25px;
            letter-spacing: 10px;
        }

<body>

<div class="parallax"></div>
<div class="caption">
    <span class="border"> WELCOME </span>
</div>
<div class="nav">
        <ul class="header">
            <ul class="header-content">
                <li class="navlink"><a href="{{ route('beverage_main') }}">Home</a></li>
                <li class="navlink"><a href="{{ route('beverage_foods') }}"> Foods </a></li>
                <li class="navlink"><a href="#"> Beverages </a></li>
            </ul>
        </ul>
</div>

  <!-- Here's where the gap appears -->
  
<div id="content" style="height:300px;background-color:#f2f2f2;font-size:36px;text-align:center;">
<p>Sample Facebook Icon</p>
</div>


<div class="parallax1"></div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('/js/js.js') }}"></script>

Answer 1

如果您指的是导航链接之间的差距，那是因为display: inline-block;通过在元素之间插入空格来创建间隙。解决此问题的一种解决方案是设置父容器font-size: 0;。

.nav{
   font-size: 0;
}

https://jsfiddle.net/unueg9zL/

Answer 2

您在<p>内添加的#content正在添加差距，p元素具有默认margin=1em（由浏览器添加）。您应该在CSS规则中明确地将margin设置为0px

#content p {margin:0}

https://jsfiddle.net/hkuo8xdx/

Answer 3

有几个原因：

p元素有边距。
.nav-placeholder班级有margin-bottom: 40px;
ul.header（应为div.header）显示为内联块并推送其父高 - 保留其默认值显示为块。

<div>之间的差距

3 个答案: