边距问题，不动的具体股利，但在div它放在

我与CSS中的margin-top属性的问题。我想在div中有一个图像，这是在另一个div中有一个20px的顶部边距。我尝试以下：边距问题，不动的具体股利，但在div它放在

[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>

所以，每当我尝试将边距属性设置为20像素，它不会显示。我还发现它会由于某种原因设置div“mainbox”的margin-top属性。任何人都知道该怎么办？我的网站是here。

谢谢！

来源

2014-01-25 YSbakker

似乎是一个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; 
}

来源

2014-01-25 19:18:52

好吧，非常感谢，这个回答了我的问题！它现在按我的意思工作。只是想知道，什么溢出：隐藏吗？谢谢！ – YSbakker

@YSbakker它建立一个新的块格式上下文。以下是相关规格：http://www.w3.org/TR/CSS2/visuren.html#block-formatting –

这是正常现象，是与利润率崩溃。

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

或者，您可以添加padding:0.01px到任何元素，以防止余量它崩溃。

来源

2014-01-25 19:18:44

这个工作得很好，唯一的事情是，maibox也会伸出20px。溢出：隐藏的方法对我更好！谢谢:) – YSbakker

边距问题，不动的具体股利，但在div它放在

回答

相关问题