关闭正常流程中我的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之间的差距

回答

相关问题