關閉正常流程中我的div之間的差距

我想弄清楚如何控制我的div之間的差距。我已經建立了jello佈局，並開始在我的導航欄上工作，當間隙變得雜亂無章時。試圖回溯一切，只留下我的div在默認流程佈局和差距。下面是HTML代碼：關閉正常流程中我的div之間的差距

body { 
 
    background-image: url("images/ozadjeCrno.jpg"); 
 
    background-size: 100%; 
 
    background-repeat: repeat-y; 
 
    font-family:  Georgia, "Times New Roman", Times, serif; 
 
    font-size:  small; 
 
} 
 

 
#container{ 
 
    width: 900px; 
 
    height: 600px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#header{ 
 
    width: 900px; 
 
    height: 100px; 
 
    background-color: rgba(207, 207, 207, 0.94); 
 
} 
 

 
#navigation{ 
 
    width: 900px; 
 
    height: 30px; 
 
    background-color: rgba(207, 207, 207, 0.94); 
 
} 
 

 
#navigation ul li{ 
 
    display: inline; 
 
} 
 

 
#logoLeft{ 
 
    margin: 20px; 
 
    width: 140px; 
 
    height: 60px; 
 
} 
 

 
#logoRight{ 
 
    margin: 20px; 
 
    width: 110px; 
 
    height: 60px; 
 
    float: right; 
 
} 
 

 
#sidebar{ 
 
    background-color: rgba(207, 207, 207, 0.94); 
 
    width: 255px; 
 
    height: 100px; 
 
} 
 

 
#main { 
 
    background-color: rgba(207, 207, 207, 0.94); 
 
    height: 100px; 
 
} 
 

 
#footer{ 
 
    background-color: rgba(207, 207, 207, 0.94); 
 
} 
 

 

 
.shadow { 
 
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
 
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
 
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
 
} 
 

 
.roundedCorners{ 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
}

<html> 
 
    <head> 
 
     <title>Solska Impro Liga</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <link rel="stylesheet" type="text/css" href="spletka.css"> 
 
    </head> 
 
    <body> 
 
     <div id="container"> 
 

 
      <div id="header" class="shadow roundedCorners"> 
 
       <img id="logoRight" src="images/logo1.png" alt="logo1"> 
 
       <img id="logoLeft" src="images/logo2.png" alt="logo1"> 
 
      </div> 
 
      <div id="navigation" class="shadow roundedCorners"> 
 
       <ul id="navButtonsList"> 
 
       <li><a href="" title="domov">DOMOV</a></li> 
 
       <li><a href="" title="domov">ŠILARJI</a></li> 
 
       <li><a href="" title="domov">O ŠILI</a></li> 
 
       <li><a href="" title="domov">ARHIV</a></li> 
 
       <li><a href="" title="domov">ENG</a></li> 
 
       </ul>    
 
      </div> 
 
      <div id="sidebar" class="shadow roundedCorners"> 
 
       <h1>SIDEBAR</h1> 
 
      </div> 
 
      <div id="main" class="shadow roundedCorners"> 
 
       <h1>MAIN</h1> 
 
      </div> 
 
      <div id="footer" class="shadow roundedCorners"> 
 
       <h1>FOOTER</h1> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

我想後的截圖，但我不能，因爲我需要10點聲望：/

謝謝您的時間，最好的祝福。

來源

2014-12-03 kamenjan

但你仍然可以包括一個jsFiddle ...在這裏，[我爲你做了一個]（http://jsfiddle.net/pze811vL/） – philtune 2014-12-03 20:53:29

嘗試CSS重置以刪除默認邊距，填充，邊框等瀏覽器適用。或者對於你的例子，'h1，ul {margin：0}'。 – j08691 2014-12-03 20:54:48

謝謝philtune爲我展示jsFiddle，將來會用到它。 – kamenjan 2014-12-03 21:11:39

你有div之間出現差距是因爲標題標籤的原因。使用overflow: hidden爲您的父divs比標題頁邊距不會超出框，並添加到您的父div div邊緣，所以你可以控制它們之間的距離。

如果您不想使用overflow: hidden，那麼您可以將標題標籤邊距更改爲填充。再次，您可以控制具有邊距的父div之間的距離。

來源

2014-12-03 20:57:39

工程就像一個魅力，謝謝。 – kamenjan 2014-12-03 21:10:43

它雖然取消了我的右側陰影。 – kamenjan 2014-12-03 21:13:21

你根本沒有右側的影子？你可以在jsfiddle上顯示一個例子嗎？ – 2014-12-03 21:24:03

某些子元素有一個默認的保證金，這是造成你的問題：

<ul id="navButtonsList">是增加（對大多數瀏覽器）1em或100%margin-top和-bottom。和你所有的<h1>一樣。

你可以做一個「復位」在你的CSS的頂部，如：

ul, h1 { margin: 0; }

來源

2014-12-03 20:56:32 philtune

請不要添加之前完成的回覆。溢出：隱藏不會損害箱體陰影，再加上將標題標籤邊距重置爲0會將它們粘貼到div邊框。 – 2014-12-03 21:03:54

@ D.Luss你對盒子的影子是對的......我想我在想其他的東西......仍然不會推薦養成這種習慣，儘管它會解決OP的問題。回覆：保證金：0 ...我發佈，沒有看到評論。 – philtune 2014-12-03 21:06:27

@ D.Luss他也說過「重置」，這意味着你以後會設置正確的邊距......當然...... – 2014-12-03 21:11:24

關閉正常流程中我的div之間的差距

回答

相關問題