原因:子元素和父元素的上邊框重合
前端開發在重構頁面的時候,子集需要按照設計圖來設計尺寸
有的時候給子元素設置margin-top 子元素沒有效果,反而父元素起到了 margintop效果,原因就是子元素和父元素上邊框重合在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
margin:0;
padding: 0;
}
</style>
<body>
<div style = "background:orange;">
<p style ='height:100px;margin-top:40px;background:red'></p>
</div>
</body>
</html>
解決辦法
1為父元素設置內邊距padding。來代替給子元素設置margin-top
2為父元素設置邊框border。
3為父元素設置 overflow: hidden 。
4內容生成(推薦)。代碼如下：
element(父元素):before{ content:''; display:table; }