Question

我想知道如何控制我的div之间的差距。我已经设置了jello布局并开始在我的导航栏上工作，当间隙变得混乱时。试图回溯所有内容，并在默认的流程布局和间隙中只剩下我的div。这是html代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

我想发布截图，但我不能，因为我需要10个声望点：/

感谢您的时间，最好的问候。

Answer 1

某些子元素具有默认边距，这会导致您的问题：

<ul id="navButtonsList">正在添加（对于大多数浏览器）1em或100% margin-top和-bottom。与您的所有<h1>相同。

你可以做一个＆＃34;重置＆＃34;在CSS的顶部，例如：

ul, h1 { margin: 0; }

Answer 2

div之间存在差距的原因是标题标签。使用overflow: hidden作为父div，而不是标题边距不会开箱即用，而是为父div添加边距，以便控制它们之间的距离。

如果您不想使用overflow: hidden，则可以将标题标签边距更改为填充。再次，你可以控制父div与保证金之间的距离。

在正常流程中缩小我的div之间的差距

2 个答案: