另一个 div 中的 div 填充会影响其他元素答案

【问题标题】：Padding of div in another div affects other elements另一个 div 中的 div 填充会影响其他元素
【发布时间】：2013-01-09 00:09:54
【问题描述】：

您好，我正在尝试创建一个导航栏，它由一个大导航 div 中的多个 div 容器组成。

我不确定我的方法是否正确，但我尝试这样做：

<div id="navigation">

    <div class="innen">
        <div class="logo">
            <a href="index.html"><img class= "logo" src="logo.png" title="Logo"/></a>
        </div>

        <div id="bar">
        <!-- Navigation Items are in here --!>
        </div>

        <div id="gamecard">
        <!-- Another right floated Element !-->
        </div>
    </div>
    <div class="unten">
        <p>You are here: <a href="index.html">Main</a></p>
    </div>
</div>

我想通过使用顶部填充将条形 div 向下推以满足图像的高度：

#bar{
padding-top: 80px;
}

但现在它也移动了向下的游戏卡容器。我怎样才能防止这种情况发生？

我还添加了一个 jfiddle： http://jsfiddle.net/Cv4p2/

【问题讨论】：

#bar { 位置：相对；顶部：80 像素； }
caniuse.com/#feat=css-gradients 你不需要那么很多供应商前缀用于渐变

标签： css html web padding

【解决方案1】：

尝试使用位置：绝对

<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>

【讨论】：

它可以工作，但它会破坏浮动。菜单栏现在在图像中。有没有办法避免它？ @Eugene-Xa 方法有效，但更好的是什么？
你需要改变padding，试试把[top][right][bottom][left]改成你需要的位置。试试这样的填充：80px 0 100px 0
好吧，已经玩过了，它可以工作，但为什么它可以和{ position: relative; top: 80px; }一起工作？
如果它有效，那么你可以使用它。如果您想了解一些信息，请查看此链接barelyfitz.com/screencast/html-training/css/positioning

【解决方案2】：

Padding 旨在在您实现它的容器内添加一个缓冲。看来您会从使用保证金中受益。你应该替换“padding-top：80px;”与“边距顶部：80px；”你会达到预期的效果。

【讨论】：