弥合股指间的鸿沟
[英]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.