Question

我有这段代码JSFiddle：

HTML

<div id="logo"></div>
<div id="menu"></div>

CSS

#logo {
    width: 400px;
    height: 100px;
    margin: auto;
    background-color: beige;
}

#menu {
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: green;
}

#menu:hover {
    border-top: 15px #f39539 solid !important;
    margin-top: -15px;
}

它的效果非常好但是当我玩CSS值时，我发现了一些我不理解的东西。

我的问题是为什么当我在-15px中设置低于margin-top的值时，当我将鼠标悬停在其上时，我的菜单div不会上升？

为什么margin-top: -30px;与margin-top: -15px;相同？

P.S：15px也是我border-top-width的价值。

更新

奇怪的是，当我悬停时，当我放下border-top: 15px #f39539 solid !important;时，即使我放margin-top: -50px;，我的DIV也会毫无问题地上升！ JSFiddle

#menu:hover {
    /* border-top: 15px #f39539 solid !important; */
    margin-top: -50px;
}

Answer 1

我想如果我理解你的要求是......

您所看到的是保证金崩溃。

当你有两个相邻的边距时，最大的胜利 - 最小的胜利。

此处有更多详情：http://reference.sitepoint.com/css/collapsingmargins

margin-top受阻于某个值

1 个答案: