您的位置：首页 > 运维架构

Div嵌套引起子元素的margin－top不起作用

2016-12-09 11:33 190 查看

最近研究css中遇到一个问题，业务情景是这样的：在body内，有两个div，div1是父元素，div2是子元素，设置div2的margin-top引起div1的变化，div2却没有变化。

先上代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>divtest</title>
<style type="text/css">
body {
margin: 0;
padding: 0px;
}
#div1 {
width: 200px;
height: 200px;
background: yellow;
}

#div2 {
height: 100px;
width: 100px;
background: red;
margin: 20px;
}
</style>
</head>

<body>

<div id="div1">
<div id="div2">
</div>
</div>
</body>

</html>

目前具体的理论原因我没有研究明白，但是一些解决方案可以解决这个问题：

1.div1设置border属性

2.div2设置position为absolute或者relative，并且设置top left等属性。

3.div1可以通过设置padding属性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css margin-top div

相关文章推荐

新的分享

章节导航