为什么 margin-top 有效，而 margin-bottom 无效？答案

【问题标题】：Why does margin-top work, but margin-bottom doesn't?为什么 margin-top 有效，而 margin-bottom 无效？
【发布时间】：2010-11-04 17:53:30
【问题描述】：

我有以下 HTML 标记，我希望菜单 div 标记始终距离父容器的底部边框 5px。

我可以使用 margin-top 手动通过反复试验定位它，但如果我要更改徽标或修改 div 大小，我必须使用反复试验再次更改此值。一个更好的解决方案是判断是否总是距离底部 5px，而不是告诉它距离顶部 X 像素。

为什么这不起作用？

<body>
    <div id="header">
        <img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />    
        <ol id="topuserbar">
            <li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
            <li><a href="#">Mis Anuncios</a></li>
            <li><a href="#">Perfil</a></li>
            <li><a href="#">Cerrar Sesion</a></li>
        </ol>
    </div>

    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>

#header
{
    background-image: url('images/headerBackground.png');
    background-repeat:repeat;
    width:auto;
}

#topuserbar
{
    border: 1px solid red;  
    font-family:Georgia;
    font-size:large;
    float:right;
    margin-top:45px;  
}

#topuserbar ol
{
}

#topuserbar li
{
    display:inline;
    margin-left:10px;
    color:#fff;
}

【问题讨论】：

标签： html css margin

【解决方案1】：

您正在使用 ol 这是一个列表...因此它有自己的边距和填充预设，因此可以在结果中发挥重要作用。

您也可以使用position: absolute 作为您的 CSS 菜单。和 position: relative 为您的父元素。然后使用bottom: 5px; 作为您的菜单。这将始终将菜单 5px 粘贴到父级上，我认为这就是您要查找的内容。

也像我说的那样检查 ol 标签边距和填充是否已被删除。

【讨论】：

【解决方案2】：

让 HTML 元素停留在事物的底部是出了名的困难。但是，您可以尝试将 ol 移到标题 div 之外，将位置设置为相对并将其顶部向上拉 -Ypx。

图片大小可能会发生变化，但你可以放心，ol相对于div的位置不会发生变化。

这对于你的 DOM 流的其余部分来说会有点奇怪，除非你也将 ol 的下边距设置为 -Ypx。

不是一个真正的答案......但它可能会有所帮助。

【讨论】：

曾经在ie上试过吗？ -Ypx 是邪恶的。他更擅长绝对定位。

【解决方案3】：

好吧，我总是鼓励人们使用 reset.css 文件 http://meyerweb.com/eric/tools/css/reset/

为什么是ol？我认为 ul 在这样的菜单中更有意义...

【讨论】：