保证金最高的问题，不是移动特定的div，而是移动其所在的div

YSbakker 发表于 Dev

伊斯巴克

我在CSS中的margin-top属性有问题。我想在div内有一个图像，在另一个div内有20px的上边距。我尝试了以下方法：

[Css代码]

* {
margin: 0 auto;
padding: 0;
}

div.wipbox {
margin-top: 20px;
width: 200px;
height: 200px;
border: 1px solid black;
}

我排除了所有其他对象的样式，在这种情况下是不必要的。

[HTML代码]

<html>

<head>
<link rel="stylesheet" type="text/css" href="pagestyle.css">
</head>


<body>
<!-- "mainbox" is the box where "wipbox" is placed in -->
<div class="mainbox">
    <div class="wipbox">
        <img src="workinprogress.jpg" width="200" height="200">

        </img>
    </div>
</div>

<a class="buttonlink" href="http://www.ysbakker.eu/beta">
    <div class="buttonbox">
            <p class="betatext">
                Click for beta      
            </p>
    </div>
</a>

</body>

</html>

因此，每当我尝试将margin-top属性设置为20px时，它都不会显示。我还发现，由于某种原因，它将设置div“ mainbox”的margin-top属性。有人知道该怎么办吗？我的网站在这里。

谢谢！

乔什·克罗齐耶（Josh Crozier）

似乎是边际崩溃的问题：

Box模型-8.3.1折叠边距。

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并为一个边距。据说以这种方式组合的边距已塌陷，所得的合并边距称为塌陷边距。

在这种情况下，您可以添加overflow:hidden到父div元素以对其进行修复：

这将起作用..我在开发工具中对其进行了测试。

div.mainbox {
    overflow:hidden;       /* Added */
    width: 500px;
    height: 500px;
    border: 0px solid rgb(0,0,0);
    margin-top: 20px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    box-shadow: 10px 10px 5px rgba(50,50,50,0.5);
    -webkit-box-shadow: 10px 10px 5px rgba(50,50,50,0.5);
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。