为什么上边距会压低一个以上的 div？答案

【问题标题】：why is top-margin pushing more than one div down?为什么上边距会压低一个以上的 div？
【发布时间】：2015-11-09 19:56:22
【问题描述】：

我希望我的徽标 div 进一步向下，不是完全居中，而是大约在那里。当我在顶部添加边距时，它也将我的菜单栏 div 向下推。我尝试添加一个填充而不是不移动 div。我猜是因为它实际上没有任何东西，对吧？有没有办法在不影响菜单栏 div 的情况下将该 div 向下移动一点？

<div id="Container">

        <div id="logo"></div>
        <div id="menu-bar">
            <ul>
                <li><a>start</a></li>
                <li><a>end</a></li>
                <li><a>info</a></li>                
                <li><a>score</a></li>                
                <li><a>reload</a></li>            
            </ul>
        </div>


    </div>
</div>

@charset "utf-8";
/* CSS Document */

*{
    padding:0;
    margin:0;
}

html{
    background:url(../images/water-316625_1280.jpg);
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;  
}


#menu-bar{
    height:30px;
    float:right;
    text-align:right;
    background-color:rgba(173,172,172,.9);
    border-radius:10px;
    border:solid rgba(109,186,235,1.00)
    margin-top:0;

}

#menu-bar li{
        float:right;
        padding: 0 10px;
        font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
        font-size:110%;
        cursor:pointer


}

#logo{

    height:100px;
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;

}

【问题讨论】：

也许这篇文章能帮上忙：developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/…

标签： html css

【解决方案1】：

所有 CSS 属性的默认值为“position: static;”。这意味着所有元素都按照它们出现在您的 html 文件中的顺序呈现。

因此，当您向 div（即徽标）添加“margin-top”时，它将为该 div 添加高度，而随后的所有其他 div 都必须重新定位以适应该更改。

所以边距会增加元素的高度或宽度。你的标志是“height:100px;”当您添加“margin-top：15px;”时您的元素总高度为 115 像素。这就是#menu-bar 移动的原因。

对此的解决方案是将#logo div 设置为“位置：相对；”然后你可以使用属性top, left, right, down。根据当前位置移动该元素，但不会影响文档中的其他 div。比如：

#logo {
  position: relative;
  top: 20px;}

会将#logo 从其当前位置向下移动 20 像素。

希望对您有所帮助。

【讨论】：

试过这个但没有用。尝试相对于两者添加，或者只是单独添加，但它仍然将两者都向下推。

【解决方案2】：

为什么要将菜单项包含在徽标容器中？允许logo 元素独立是一个很好的做法。请查看更新后的代码。

为#logo id 提供左侧的float 属性
将; 放在#menu-bar id 的border 属性之后（在您的代码中缺失）- border:solid rgba(109,186,235,1.00); 和#menu-bar li 中的cursor:pointer
请同时为<ul> 元素提供margin-top:0。

这里是JSfilddle

【讨论】：