关于<div>内<p>元素的margin问题
来源：4-8 课程总结
VincentGu
2017-09-20 21:03:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
div{
width:50%;
height:100px;
background-color: pink;
margin:auto;
}
p{
width:50%;
height:30%;
background-color: yellow;
margin:10px;
}
</style>
</head>
<body>
<div>
这是一个盒子
</div>
<div>
<p>这是段落</p>
</div>
</body>
</html>
为何p元素左边的margin是在div里的而上边的margin是在div外面的?难道不应该同时在外面或者同时在里面吗
写回答
1回答
-
垂直方向上，所有毗邻（或嵌套）的两个或更多盒元素的margin将会合并为一个margin共享。因此子元素的margintop值，会折叠到父元素的身上，从而父元素表示出margin-top的值
1h017-09-21
相似问题