彌合股指間的鴻溝
[英]Closing the gap between my divs in normal flow
問題描述
我想弄清楚如何控制div之間的差距。 當間隙變得一團糟時，我已經建立了jello布局並開始在導航欄上工作。 嘗試回溯所有內容，並以默認流程布局和差距只剩下我的div。 這是html代碼：
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個聲望點，所以我不能：/
謝謝您的時間，最好的問候。
2 個解決方案
解決方案1
0 2014-12-03 20:56:32
某些子元素具有默認邊距，這會引起您的問題：
<ul id="navButtonsList">正在添加（對於大多數瀏覽器） 1em或100% margin-top和-bottom 。 與所有<h1>相同。
您可以在CSS頂部進行“重置”，例如：
ul, h1 { margin: 0; }
解決方案2
0 已采納 2014-12-03 20:57:39
div之間存在間隙的原因是由於標題標記。 使用overflow: hidden為您的父div overflow: hidden ，標題邊距不會開箱即用，也不會為父div添加邊距，因此您可以控制它們之間的距離。
如果您不想使用overflow: hidden ，則可以將標題標簽的邊距更改為填充。 同樣，您可以使用邊距控制父div之間的距離。
為什么我的div之間存在差距？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.