邻居之间的垂直边距不一致

Question

如图所示，边距不按预期工作。如果您有任何人可以查看，我已经留下了该网站的链接。我理解有些人可能不赞成这个问题，但我不知道还能在哪里问，所以请不要贬低。

链接：http://openweb.gdn

感谢您的帮助！

Answer 1

这称为保证金折叠，请在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

您可以选择放置较大的margin-top或margin-bottom，或在元素的2个之间添加空元素（tunneler和gamesdiv之间）

实施例

保证金崩溃

＆＃13;

＆＃13;

.box {
    width: 100px;
    height: 100px;
    margin: 30px;
    background-color: black;
}

＆＃13;

<div class="box"></div>
<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

＆＃34;修正＆＃34;保证金崩溃

＆＃13;

＆＃13;

.box {
    width: 100px;
    height: 100px;
    margin: 30px;
    background-color: black;
}

.fix {
    height: 1px;
    margin-bottom: -1px;
}

＆＃13;

<div class="box"></div>
<div class="fix"></div>
<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你只需要像这样设置1vw的边距

#tunneler {
    float: left;
    border-radius: 5px;
    background-color: #F5F5F5;
    padding: 20px;
        padding-top: 20px;
    padding-top: 10px;
    margin: 1vw !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
}

还有另一个id为#emulatorsdiv的div它位于你的div类的背景.gamesdiv你的.gamesdiv很好但是当我们关闭#emulatordiv的css时，边缘变得很好你必须检查那个兄弟