margin和padding的问题
来源：3-23 margin外边距属性
saltymelon
2019-04-07 11:50:52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
height: 400px;
width:300px;
background: black;
}
.margin{
height: 100px;
width: 100px;
background-color: pink;
margin:300px;
}
.padding{
height: 100px;
width: 100px;
background-color: yellow;
padding:100px;
}
</style>
</head>
<body>
<div class="container">
<div class="margin">margin</div>
<div class="padding">padding</div>
</div>
</body>
</html>如代码，请问为什么给子元素设置margin，父元素也会有设置margin的效果呢？这种情况我理解的margin是指父元素的边框到子元素边框的距离，这么理解对吗？另外设置margin和padding会撑大父元素的高度宽度吗？还是无论子元素变多大，父元素都不变呢？
写回答
1回答
-
1、子元素设置margin影响父元素的原因：
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠，说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding，就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦，只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin，防止它越级，把自己的margin当成领导的margin执行。
2、设置了的margin元素盒子本身不会变大，但是盒子与其他盒子之间的间隙会变大，但是会使盒子与盒子之间的距离增大，设置了padding的元素，盒子会变大。
祝学习愉快！
2
相似问题
关于padding和margin
回答 1
3-19问题
回答 2