Question

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属性。谁知道该怎么办？我的网站是here。

谢谢！

Answer 1

好像是collapsing margin(s) issue：

Box model - 8.3.1 Collapsing margins

在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;
}

Answer 2

这是正常行为，与保证金折叠有关。

要“修复”，请尝试在容器上使用padding-top，而不是在内容上使用margin-top。

或者，您可以将padding:0.01px添加到任何元素，以防止边距折叠。

保证金最高的问题，不是移动特定的div而是它放置的div

2 个答案: