Question

我正在尝试减少网站slicknav-menu和top-part上两个元素之间的空间。我该怎么做？

以下是css代码

#banner {
        /*background: url("assets/upload/compressed.jpg") no-repeat center center fixed;*/

}

#banner .big-text {
  /*color: white;*/
  /*color: #7dcbbb;*/
  /*font-size: 2.5em;*/
  /*margin-top: 80px;*/
  /*font-weight: 0;*/

}

#banner .small-text {
  /*color: white;*/
  /*color: #7dcbbb;*/
  /*font-size: 2em;*/

}



@media (max-width: 350px){
    #banner .big-text {
      /*color: black;*/
    }
    #banner .small-text {
      /*color: black;*/
    }



}

.slicknav_menu {
    display:none;
}

#top_part{
    margin-bottom: 0 auto;

}

#work{
    margin-bottom: 50px;
}

@media screen and (max-width: 50em) {
    /* #menu is the original menu */
    .js .navbar {
        display:none;
    }

    .js .slicknav_menu {
        z-index: -1;
        display:block;
        color: white;
        float: right;
        background: black;
        right: 0px;
        position: fixed;
        margin-top: -3px;
    }
}

@media screen and (max-width: 1100px) {
    #work-preview li {
        width: 49%;
    }
}

@media screen and (max-width: 800px) {
    #top_part{
        margin-bottom: 150px;
    }
}

@media screen and (max-width: 700px) {
    #work-preview li {
        width: 99%;
    }
}

@media screen and (max-width: 400px) {    
    #top_part{
        margin-bottom: 100px;
    }
}

这里也是一些HTML代码。背景中有一个横幅，我正在尝试减少顶部链接和当前位于页面中间但我想要的文本的第一个元素之间的空间把它拉起来

<body>


        <!-- NAVIGATION START -->
        <div class="navigation">
            <!-- START LOGO -->
            <div class="logo-wrapper" id="logo-wrap">
                <a id="logo" href="index.htm">Title</a>
            </div><!-- END LOGO -->
            <ul class="navbar">
                <!-- <li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">Home</a></li> -->
                <li class=""><a href="link1.htm">Link 1</a></li>

            </ul>
        </div>
        <!-- NAVIGATION END -->

        <!-- Content -->
        <section id="layout-content">
            <!-- START PAGE WRAPPER -->
            <div id="page-wrapper">
                <!-- START BANNER SECTION -->
                <section id="banner" class="section parallax" style='background-image:  url("assets/ttg.png")'>
                    <div class="banner-container">
                        <div id="top_part">

                            <span class="big-text">Site title</span><br>
                            <span class="small-text">
                                 Site description<span class="bold"> </span>
                            </span>
                        </div>

                  <div id="bottom_part">
                            <div class="button-wrapper">
                                <a class="button scrollto" href="#work1">Browse </a>
                                <a class="button scrollto" href="getaquote.htm">Get </a>
                            </div>
                            <br><br>
                            <div class="text-center moto">
                                <h4 style="color: #FFFFFF">Use </h4>
                            </div>
                        </div>
                    </div>
                </section><!-- END BANNER SECTION -->

Answer 1

您可能必须使元素块级元素（显示：块）并将其边距设置为0px。

Answer 2

没有看到HTML，我只是猜测......你的代码看起来有点混乱，但也许从一些修复开始。

我不确定为什么“margin-bottom”有两个值。尝试更改：

    #top_part{
        margin-bottom: 0 auto;

    }

为：

    #top_part{
        margin: 0px auto;
    }

重新审视这些并确保它们与其他内容不冲突或重写：

    @media screen and (max-width: 800px) {
        #top_part{
            margin-bottom: 150px;
        }
    }

    @media screen and (max-width: 400px) {    
        #top_part{
            margin-bottom: 100px;
        }
    }

您也可以尝试添加

    padding: 0px;

只是为了排除这一点。

如何减少两个div元素之间的空白空间

2 个答案: