Question

我有一个div浮动在两个文本输入元素的左侧。当我在输入上设置margin-top时，浮动div的边距也会受到影响。为什么会这样，以及F如何阻止它发生？！

相关HTML：

<body>
    <div class="manage-page">
        <h2>Set Logo Order</h2>
        <hr>
        <div class="logo-container">
            <div class="logo-draggable">
                <div class="logo-image-box"></div>
                <input type="text" />
                <input type="text" />
            </div>
        </div>
    </div>
</body>

相关CSS：

.manage-page {
    margin-top: 2.5em;
    margin-left: 25%;
    margin-right: 25%;
    min-width: 50%;
}

.logo-container {
    border:1px solid #777777;
    clear: left;
    cursor: move;
    height: 12.5%;
    margin-bottom: 0.625em;
}

.logo-image-box {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border:1px solid #000000;
    float: left;
    height: 100%;
    margin: 0 .875em;
    width: 12.5%;
}

.logo-draggable input {
    border: 1px solid #cccccc;
    border-radius: 0.25em;
    display: block;
    font-size: 0.875em;
    height: 2em;
    line-height: 1.25;
    margin-top: .5em;
    padding: 0.375em 0.75em;
    outline: none;
}

您可以在下面的jsfiddle网址上看到它。只需更改.logo-draggable input的上边距，并观察.logo-image-box上升/下移：

http://jsfiddle.net/Uj2K6/

Answer 1

我认为您患有collapsing margins（向下滚动）。

相互接触的不同元素的垂直边距（因此没有内容，填充或分隔它们的边框）将崩溃，形成单个边距，该边距等于相邻边界中的较大边距利润率。

CSS：为什么margin-top会影响浮动的邻居？

1 个答案: