弥合股指间的鸿沟
[英]Closing the gap between my divs in normal flow
问题描述
I'd like to figure out how to get control of gaps between my divs. 
我想弄清楚如何控制div之间的差距。 I had set up the jello layout and started to work on my navigation bar, when gaps got all messy. 当间隙变得一团糟时，我已经建立了jello布局并开始在导航栏上工作。 Tried to backtrack everything and got left with just my divs in a default flow layout and gaps. 尝试回溯所有内容，并以默认流程布局和差距只剩下我的div。 Here is the html code: 这是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>
I wanted to post a screenshot, but I can't since I need 10 reputation points :/ 我想发布一个屏幕截图，但由于需要10个声望点，所以我不能：/
Thank you for your time, best regards. 谢谢您的时间，最好的问候。
2 个解决方案
解决方案1
0 2014-12-03 20:56:32
Certain child elements have a default margin, which is causing your issues: 某些子元素具有默认边距，这会引起您的问题：
<ul id="navButtonsList"> is adding (for most browsers) 1em or 100% margin-top and -bottom . <ul id="navButtonsList">正在添加（对于大多数浏览器） 1em或100% margin-top和-bottom 。 Same with all your <h1> 's. 与所有<h1>相同。
You could do a "reset" at the top of your CSS, like: 您可以在CSS顶部进行“重置”，例如：
ul, h1 { margin: 0; }
解决方案2
0 已采纳 2014-12-03 20:57:39
The reason you have gaps between divs is because of heading tags. div之间存在间隙的原因是由于标题标记。 Use overflow: hidden for your parent divs than heading margin won't go out of box and than add margin to your parent divs so you can control distance between them. 使用overflow: hidden为您的父div overflow: hidden ，标题边距不会开箱即用，也不会为父div添加边距，因此您可以控制它们之间的距离。
If you don't want to use overflow: hidden than you can change heading tag margin to padding. 如果您不想使用overflow: hidden ，则可以将标题标签的边距更改为填充。 Than again you can control distance between parent divs with margin. 同样，您可以使用边距控制父div之间的距离。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.