如何減少兩個div元素之間的空白空間

-3

我試圖減少網站slicknav-menu和top -part上的兩個元素之間的空間。我該怎麼做？如何減少兩個div元素之間的空白空間

下面是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 -->

來源

2014-10-17 user35434494

請同時發佈'HTML'或創建一個jsFiddle。 – 2014-10-17 20:05:57

發表了HTML代碼 – user35434494 2014-10-17 20:21:56

這種方式很難找出問題。你可以創建一個jsFiddle或發佈一個鏈接到你的網站可以看到這個問題？ – 2014-10-17 20:27:02

這是目前在中，頁面的中間，但你可能需要對元素塊級元素（顯示：塊），並設置他們的利潤爲0px。

來源

2014-10-17 20:07:12

它沒有區別 – user35434494 2014-10-17 20:09:55

沒有看到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;

just to r那也是。

來源

2014-10-17 20:19:37 paulmz

該html代碼張貼在那裏 – user35434494 2014-10-17 20:20:26

如何減少兩個div元素之間的空白空間

回答

相關問題